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

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

你也可以尝试添加

overflow:scroll;

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

Answer 3

检查这个

#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 4

用这个

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

Answer 5

您正在使用position: absolute;，所以除非并且直到您div使用min-width并margin设置为auto

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

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