html - 绝对垂直居中导致部分div在超过浏览器窗口垂直大小时消失？

Question

我发现这种垂直居中的方法看起来很常见..

 #container {
 width: 960px;
 height: 740px;
 position: absolute;
 top: 50%;
 left: 50%;
 margin-left: -480px;
 margin-top: -370px;
 }

我试图在此处居中的是整个网站，当屏幕预览大于 div 高度(大于 740 像素)时，这段代码完全符合预期。但是，一旦浏览器窗口最小化到小于 div 的垂直尺寸 (740px)，部分页眉就会消失在页面顶部上方。

我可以理解为什么会发生这种情况，因为 50% 变得小于 div 大小的一半，这将与 margin-top 相等。我正在寻找的是解决此问题的方法？或者甚至是完全不同的方法，我只需要将网站垂直和水平居中。

Answer 1

试试这个:

#container {
  height: 740px;
  width: 960px;
  position: absolute;
  margin: auto;
  top: 0; right: 0; bottom: 0; left: 0;
}

顺便说一句，Smashing Magazine 最近出版了 a nice article关于这个。