Getting auto margin to work for center aligning div

Getting auto margin to work for center aligning div

I've overlooked something obvious and simple for sure here but I'm going
to have to admit defeat and ask on SO for now.
I've made a JSfiddle.
A simple one. Simply trying to center align the div class ratings inside
it's parent container. I haven't managed to get any auto margins to work
at all after numerous faffing with it.
The code below:-
CSS
.caption {
padding: 9px;
width: 100%;
display: block;
}
.ratings {
width: 100%;
overflow: hidden;
margin: 3px auto;
display: block;
}
Markup
<div class="caption">
<h2 class="product-name"><a href="#">Product Title</a></h2>
<div class="ratings">
<div class="rating-bar">
<div class="rating-box"></div>
<div class="rating" style="width:100%"></div>
<div class="rating-fill"></div>
</div>
<span class="amount"><a href="#">(2)</a></span>
</div>
</div>