垂直居中全屏 div 带滚动条

Question

祝大家圣诞快乐！

我想制作全屏、垂直居中 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 检查行为。

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

Answer 1

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

Example

Answer 2

只需添加

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

JSfiddle：jsfiddle.net/uzy78s69/3

垂直居中全屏 div 带滚动条

Vertical centred fullscreen div with scroll bar

html

css

jquery

vertical-alignment

html5-fullscreen