这个问题在这里已有答案:
我已经阅读了关于垂直对齐和居中div的无数Q&A和博客文章,但我无法让最简单的情况起作用:直接在html体内的空20x20 div。
HTML:
body
{
background-color:DarkGray;
display:table;
}
.box
{
background-color:black;
display:table-cell
margin:0, auto;
width:20px;
height:20px;
}
<body>
<div class="box">
</div>
</body>
这是JSFiddle。
display:table
和display:table-cell
很糟糕,远离他们。这是将div
置于<body>
中心的一种非常常见的方法。它将元素的顶部和左侧定位在body
的50%点,然后从width
和height
中减去margin-top
和margin-left
的1/2。
.box
{
background-color:black;
position:absolute;
left:50%;
top:50%;
width:20px;
height:20px;
margin-left:-10px; /* -1/2 width */
margin-top:-10px; /* -1/2 height */
}
Tyriar的代码绝对是最好的解决方案。
永远记住要将margin-left
和margin-top
设置为想要居中的div宽度的一半,因为元素总是从它们的两侧而不是它们的中心对齐。
首先,在margin样式中存在语法错误:
margin: 0, auto;
但应该是:
margin: 0 auto;
在垂直定位的支持下,它应该是:
http://jsfiddle.net/olexander/8At93/387/
html, body {
height: 100%;
}
.box {
position: relative;
top: 50%;
margin: -10px auto; /* -height/2 */
width: 20px;
height: 20px;
}