垂直居中全屏div滚动条

问题描述：

我想使全屏，垂直居中div覆盖下面的所有内容。

/* css */ 
#box { 
    background: #fff; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 9999; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    overflow-y: auto; 
} 

/* It is <body> tag class */ 
.overlay-hidden { 
    overflow: hidden; 
} 

<!-- html --> 
<body class="overlay-hidden"> 
    <div id="box"> 
     <!-- #box popup content goes here --> 
    </div> 
    <div class="container"> 
     <!-- content goes here --> 
    </div> 
</body>

这里是我的代码：https://jsfiddle.net/uzy78s69/ 这似乎工作的伟大，但是当我添加更多的内容，以#box它不能很好地工作https://jsfiddle.net/uzy78s69/1/

点击X或Create new post检查行为。

我做错了什么？我该如何解决它？

已检查'对齐项：中心;'这部分...当我未选中它工程....我想你想要这样？ –

**垂直居中全屏**你的意思是？以全宽度内容为中心的目的是什么？ –

@dreamhunter通过全屏我已经意味着溢出所有浏览器区域'宽度：100％;身高：100％'。 'div'也应该垂直和水平居中。 – Jarmark

答

只需添加

#box > .container { 
    max-height: 100%; 
}

的jsfiddle：jsfiddle.net/uzy78s69/3

答

只需从#box类中删除display:flex;类。

Example

垂直居中全屏div滚动条

相关推荐