保证金0自动在div中不起作用，显示：表格单元格

Question

我在页面上工作..其中边距0自动不在div中显示：表格单元格 这是我的代码

CSS样式

<style>
    html,body{
        height:100%;
        width:100%;
    }
    .wrapper{
        background-color:#999;
        height:500px;
    }
    .tableContent{
        display:table;
        height:500px;
    }

    .tableContentRow{
        display:table-row;
    }

    .tableContentCell{
        display:table-cell;
        vertical-align:middle;
        height:500px;
    }

    .loginBox{
        height:100px;
        background-color:#FFF;
        width:250px;
        margin:0 auto;
    }
</style>

这是HTML

<div class="wrapper">
    <div class="tableContent">
        <div class="tableContentRow">
            <div class="tableContentCell">
                <div class="loginBox">
                     <!-- More contents Go HEre -->
                </div>
            </div>
        </div>
    </div>
</div>    

loginBox div不位于tableContentCell div的中心位置
请帮助......

Answer 1

表本身不居中。 请检查此fiddle。

.tableContent{
    margin:0 auto;
}

Answer 2

在.tableContentCell div上设置一个特定的宽度，你就可以了。

Fiddle