垂直对齐容器

Question

我想将我的容器 div 垂直居中，就像它水平对齐一样，因为 margin: auto; 。我在谷歌上搜索了一些时间来了解如何做到这一点，但它似乎对我不起作用。也许有某种通用的方法可以做到这一点，就像水平居中的 margin: auto; 方法一样简单？因为我觉得很奇怪，我们生活在 2011 年，仍然没有简单的 css 命令来完成这项任务...

#container
{
    margin: auto;
    width: 960px;
    height: 640px;
    background-color: brown;
}

Answer 1

关于垂直对齐，有大量教程，尤其是对于IE，需要特别小心。其中之一：使用 CSS 垂直居中内容。还有另一个答案此处。

Answer 2

还能更简单吗...

html, body {
    overflow:hidden
}
#container {
    width:960px;
    height:640px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-320px;
    margin-left:-480px;
    background:brown
}

overflow:hidden 是隐藏出现的滚动条（IE6 为 html ，IE5 为 body ）。我不知道为什么会发生这种情况。

但是，如果您希望在浏览器窗口较小时保持其可滚动，只需将高度设置为 639px 并删除 overflow:hidden 即可。

Answer 3

如果您的 div 具有固定高度，您可以通过添加另一个具有负边距（主 div 高度的一半）的 div（带有浮动）来垂直对齐它，然后更改 div 的 CSS（添加 clear）。

另外不要忘记指定 html 和 body 的 100% 高度，否则它不起作用。

像这样：

CSS：

html {
    overflow: auto;
}
html, body {
    margin:0;
    padding:0;
    height:100%;
}
#alignDiv {
    float:left;
    height:50%;
    margin-bottom:-320px; /* half the centered div */
    width:1px;
}
#container
{
    margin: 0 auto;
    width: 960px;
    height: 640px;
    background-color: brown;
    clear:left; /* without the clear it won't center */
}

html：

<div id="alignDiv"></div>
<div id="container"></div>