用table布局即可实现td在table中的布局效果,在配合上text-align:center和vertical-align:即可完美实现div垂直和水平上的居中

html:

<div class="table">
    <div class="table-cell">test</div>
</div>

css:

.table{
    display:table; 
    height:200px;
    width:200px;
    bacground:red;
}
.table-cell{
    display:table-cell;
}

效果图

QQ截图20160708153504.png

由于在ie6-7中不支持display:tabele,以下是网友的解决方案

html:

<div class="table">
    <div class="table-cell">
        <div class="content">
            test
        </div>
    </div>
</div>

css:

.table{
   height:200px;
   width:200px;
   bacground:#ccc;
   position 
}
.tableCell {					
    display: table-cell;
    vertical-align: middle;
    text-align: center;			
    padding: 10px;
    *position: absolute;
    *top: 50%;
    *left: 50%;
}
.content {					
    *position:relative;
    *top: -50%;
    *left: -50%;
}