1

我发现这种垂直居中方法似乎很常见..

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

我要在这里集中的是整个站点，当屏幕预览大于 div 高度（大于 740 像素）时，此代码按预期完美运行。但是，一旦浏览器窗口最小化到小于 div 的垂直尺寸（740 像素），标题的部分就会消失在页面顶部上方。

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

4

4 回答 4

1

您需要添加一个媒体查询：

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

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

于 2013-11-08T20:04:51.343 回答
1

尝试这个：

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

顺便说一句，Smashing Magazine 最近发表了一篇关于此的好文章。

于 2013-11-08T20:27:12.927 回答
0

像Lino Rosa 提到的绝对居中是这里最好的方法，可以轻松地进行水平和垂直居中，同时允许您添加一些响应式触摸，例如修复您的身高问题。

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

这是我所做的：

.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;
}

通过设置 amax-height和max-width，即使它的宽度小于 960 像素或高度小于 740 像素，盒子也永远不会超过容器（在本例中为浏览器视口）的 90%，因此即使是小屏幕也能看到一个很好的居中盒子。overflow: auto确保如果内容比框长，用户可以在框中滚动以查看其余内容。

查看演示

如果无论屏幕大小如何，您都必须使框恰好为 960 像素 x 740 像素（强制用户滚动以查看小窗口上的所有内容），则仅将绝对居中样式应用于#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;
  }
}

查看演示

于 2013-11-13T17:28:40.960 回答
0

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

下面是一个demo，希望对你有帮助。

.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>

于 2017-06-10T00:06:46.343 回答