Question

我使用以下CSS来将DIV垂直居中在页面上（并将其水平居中）。如果浏览器窗口的高度小于600px，我希望窗口能够滚动显示整个DIV。但是，DIV只是在页面上居中，并且隐藏了超出浏览器高度的任何内容 - 没有滚动条。有没有办法允许用户滚动到这些现在隐藏的区域？

#container{
    width:800px;
    height:600px;
    position:absolute;
    margin-top:-300px;
    top:50%;
    margin-left:-400px;
    left:50%;
}

Answer 1

为@media和max-width

添加max-height个查询

@media (max-width: 800px) {
    #container {
        left: 0px;
        margin-left: 0px;
    }
}

@media (max-height: 600px) {
    #container {
        top: 0px;
        margin-top: 0px;
    }
}

JSFiddle

Answer 2

您正在使用position: absolute;，因此除非您div min-width且margin设置为auto，否则无法实现此目标/ p>

<div>vertically centered div</div>
<div>min-width div</div>

div:nth-of-type(2) {
   min-width: 1000px; /*Change accordingly*/
}

Answer 3

你也可以尝试添加

overflow:scroll;

overflow属性指定内容溢出元素框时会发生什么。

Answer 4

检查一下

#container{
position: absolute;
top: 50%;
left: 50%;
width: 30em;
height: 18em;
margin-top: -9em;
margin-left: -15em;
border: 1px solid #ccc;
background-color: #f3f3f3;
}

Answer 5

使用此

  #container
    {
    width:800px;
    height:600px;
    margin-left:auto;
    margin-right:auto;
    }

如何防止垂直居中的div从小屏幕上消失

5 个答案: