2

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

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

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

4

2 回答 2

6

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&body元素应用 100% 的高度：

html, body {
    height: 100%;
}

请参阅上面的演示。

于 2012-11-12T01:29:01.557 回答
3

正确的垂直居中是 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;

演示/来源

请注意，负边距在小于div.

这是使用表格的稍微更hackish的方式。基本思想是CSS 属性在应用于表格时与旧属性vertical-align:middle具有相同的效果。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%; }

演示/来源

这种方法的优点是它完全跨浏览器——在 IE6 及更高版本、Firefox、Chrome、Opera 和 Safari 上进行了测试。尽管它应该可以工作，但我没有在移动浏览器上进行测试。它也没有小分辨率的滚动问题。我在我的一个生产站点中将这个 hack 用于居中模式。

于 2012-11-12T01:29:02.533 回答