javascript - 如果用户滚动，则出现在中间的 Div 会中断

Question

我的页面 body/html 使用 CSS 设置如下:

body, html {
    height: 100%;
    margin: 0px;
    padding: 0px;
    font-family: Segoe, Segoe UI, DejaVu Sans, Trebuchet MS, Verdana, " sans-serif";
    font-size: 14px;
    display: flex;
    flex-direction: column;
    background: #282828;
    min-width: 100%;
    min-height: 100%;
}

然后我有一个弹出窗口，我偶尔会使用 JQuery 将其附加到页面(正文)。这个popup是DIV如下:

.error_popup_container {
    width: 400px;
    height: auto;
    padding: 10px;
    background: #454545;
    border: solid #fafafa 2px;
    border-radius: 1px;
    z-index: 3;
    position: absolute;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -200px; /* 50px = half of height, 140px = half of width */
}

问题是如果用户没有滚动，div 只会出现在页面中间。

如果用户滚动，div 将在 View 之外。

我需要 div 出现在页面中间，无论它们滚动了多远。有什么想法吗？

我已经玩了很多次了，但还没有找到原因。我敢肯定这很简单。

Answer 1

同意立场:固定；为了让它居中，我会使用:

/*modal-wrapper*/ {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

如果模式永远比一个小视口(viewport)长，你可以添加一个带有 overflow-y: scroll; 的媒体查询断点。属性(property)。