Question

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

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

我想在这里集中的是整个网站，当屏幕预览大于div高度（大于740px）时，此代码完全符合预期。但是，一旦浏览器窗口最小化，小于div的垂直尺寸（740px），标题的部分就会消失在页面顶部之上。

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

Answer 1

您需要添加媒体查询：

@media screen and (min-height:740px) {
    #container {
        top:0;
        margin-top:0;
    }
}

这仅适用于屏幕高度至少为740像素的格式。如果您想了解有关媒体查询的更多信息，请查看http://www.w3.org/TR/css3-mediaqueries/

Answer 2

试试这个：

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

顺便说一句，Smashing Magazine最近发表了a nice article关于此事。

Answer 3

像Lino Rosa mentioned这样的绝对居中是最方便的水平和垂直居中方法，同时允许您添加一些响应式触摸，例如修复身高问题。

理想情况下，您应该使用百分比作为宽度和高度声明，以便您的内容随视口而变化。当然，有时你只需要像素： - ）

这就是我所做的：

.Absolute-Center {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto;
}

#container {
  width: 960px;
  max-width: 90%;
  height: 740px;
  max-height: 90%;
  overflow: auto;
}

通过设置max-height和max-width，该框永远不会超过容器的90％（在本例中为浏览器视口），即使它小于960px宽或740px高，所以即使是小屏幕也能看到一个漂亮的中心盒overflow: auto确保如果内容长于框，则用户可以在框中滚动以查看其余内容。

<强> View the demo

如果您的框必须精确到960px×740px，无论屏幕大小如何（强制用户滚动查看小窗口上的所有内容），只需将绝对居中样式应用于#container使用媒体查询，如下所示：

#container { 
  width: 960px;
  height: 740px;
  overflow: auto;
  margin: auto; 
}

@media screen and (min-height:740px) and (min-width: 960px) {
  #container {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
  }
}

<强> View the demo

Answer 4

我遇到了同样的问题。由于我的元素的高度是动态变化的，我不能给它一个固定的高度。

下面是一个演示，希望它有所帮助。

.wrapper {
  display: table;
  height: 100vh;
  width: 100%;
}
    
#container {
  display: table-cell;
  vertical-align: middle;
  background-color: lightblue;
}

.content {
  width: 30%;
  height: 30%;
  background-color: red;
}

<html>
</html>
<body>
   <div class="wrapper">
        <div id="container">
          <div class="content">
            </div>
        </div>
   </div>
</body>

当超出浏览器窗口的垂直尺寸时，绝对垂直居中导致div的部分消失？

4 个答案: