trying to centre a div within in a div

Question

I am trying to centre a div but having difficulty. Beneath the chart in my fiddle I have a table which I want to centre under the chart.

I have tried the class below, I also set the width but it doesn't seem to work. It looks to me like the right hand side of the table is centred to the middle of the chart rather than the middle of the chart. I am not fully understanding the behaviour.

html

 <div id="IndexArea" class="content">
    <div id="redraw" style="float:left">
            <button class="ui-button ui-widget ui-corner-all">Paint</button>
    </div>
    <div id="range-butts-index" style="float:right">
        <button class="ui-button ui-widget ui-corner-all" data-range="5">5d</button>
        <button class="ui-button ui-widget ui-corner-all" data-range="20">MTD</button>
        <button class="ui-button ui-widget ui-corner-all" data-range="999">Max</button>
    </div>
    <div id="chartIndexPerf" class="indexChart"></div>
    <div id="tableIndexPerf" class="centerDiv"></div>  

css

.indexChart{
    clear: both;
    height: 500px;
}

.centerDiv{
    margin: auto;
}

.content {  
  height: 1000px;
  background-color: #F5CF8E;
  overflow: hidden;
}