Question

我正在尝试将div放在文档中心，它可以水平工作，但不能垂直工作：

width: 950px;
height: 630px;
background: #FFFFFF;
margin: auto;

margin: auto不应该将它放在任何内容的中心（页面本身，在这种情况下）？我以前有一个解决方法，但我不能让它工作。知道我做错了什么也很好，所以我可以停止这样做。

Answer 1

margin: auto不会垂直对齐元素。

如果您必须支持旧浏览器，则必须为div定义固定高度：

div {
    position: relative;
    top: 50%;
    width: 750px;
    height: 500px; /* sample. adjust as needed */
    margin: -250px auto 0; /* half the height */
}

这是小提琴：http://jsfiddle.net/2qmVX/

如果你不关心IE8及以下，这将允许你保持你的液体高度：

div {
    position: relative;
    top: 50%;
    margin: auto;
    transform: translateY(-50%);
    /* add prefixed versions... */
}

这是小提琴：http://jsfiddle.net/VMaVM/（请记住：仅限现代浏览器）。

更新：正如@FabrícioMatté所指出的那样，你还必须对html＆amp; body元素：

html, body {
    height: 100%;
}

参见上面的演示。

Answer 2

正确的垂直居中是CSS3尚未涵盖的内容。

幸运的是，在您的情况下，由于您有一个固定的高度，您可以操纵top / left属性并使用否定margin-top和margin-left来获得所需的行为，absolute定位：

background: #FFFFFF;
width: 950px;
height: 630px;
top: 50%;
left: 50%;
margin: -315px 0 0 -425px; /*top is negative half of height, same for width*/
position: absolute;

Demo / source

请注意，在小于div的分辨率下，负边距可能会出现意外行为。

使用表格，这是一种稍微晦涩的方式。基本思想是应用于表时vertical-align:middle CSS属性与旧valign="center"属性具有相同的效果。所以HTML看起来像这样：

<table class="vcenter"><tr><td>
    <div id="myDiv">This is a centered div</div>
</td></tr></table>

CSS：

.vcenter {
    vertical-align: middle;
    width: 100%;
    height: 100%;
}
#myDiv {
    background: #FFF;
    width: 950px;
    height: 630px;
    margin: 0 auto;
}
html, body { height: 100%; }

Demo / source

这种方法的优点在于它在IE6及更高版本，Firefox，Chrome，Opera和Safari上进行了完全跨浏览器测试。我没有测试移动浏览器，虽然它应该工作。此外，它没有小分辨率的滚动问题。我在我的一个生产站点中使用这个hack作为居中模态。

保证金：汽车不居中？

2 个答案: