尝试将div中的div居中

Question

我正在尝试将div居中，但遇到困难。在my fiddle中的图表下方，有一张表格，我想在图表下方居中。

我尝试了下面的类，我也设置了宽度，但是似乎不起作用。在我看来，表格的右侧居中于图表的中央而不是图表的中央。我对行为没有完全了解。

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;
}