我正在尝试使用table-cell方式垂直和水平居中div。
它在我使用以下代码时有效：
div {
display: table;
}
.@R_502_395@ {
display: table-cell;
position: absolute;
vertical-align: middle;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
但我宁愿将.@R_502_395@包装在另一个名为.center的div中，就像这里JSFiddle一样，但出于某种原因，尽管它在JSFiddle中有效，但它在我的网站上并不适合我。
解决方法
这是一个很好的起点。
HTML：
<div class="containing-table">
<div class="centre-align">
<div class="content"></div>
</div>
</div>
CSS：
.containing-table {
display: table;
width: 100%;
height: 400px; /* for demo only */
border: 1px dotted blue;
}
.centre-align {
padding: 10px;
border: 1px dashed gray;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.content {
width: 50px;
height: 50px;
background-color: red;
display: inline-block;
vertical-align: top; /* Removes the extra white space below the baseline */
}
请参阅演示：http://jsfiddle.net/audetwebdesign/jSVyY/
.containing-table为.centre-align(表格单元格)建立宽度和高度上下文。
您可以根据需要应用text-align和vertical-align来改变.centre-align。
请注意，.content需要使用display：inline-block，如果要使用text-align属性水平居中。
