我正在尝试使用table-cell方式垂直和水平居中div。
它在我使用以下代码时有效:
div { display: table; } .logo { display: table-cell; position: absolute; vertical-align: middle; left: 0; right: 0; bottom: 0; top: 0; margin: auto; }
但我宁愿将.logo包装在另一个名为.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 */ }
请参阅演示:@L_502_1@
.containing-table为.centre-align(表格单元格)建立宽度和高度上下文。
您可以根据需要应用text-align和vertical-align来改变.centre-align。
请注意,.content需要使用display:inline-block,如果要使用text-align属性水平居中。