Question

我使用CSS设置了我的页面的body / html：

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附加到页面（正文）。这个弹出窗口的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将不在视野范围内。

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

我玩了大约一吨但是没有找到原因。我确定它很简单。

Answer 1

我想你可能只想使用position: fixed

Answer 2

同意立场：固定;为了保持中心，我会用：

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

如果模态将比小视口长，则可以添加带溢出的媒体查询断点：y：scroll;属性。

如果用户滚动，则出现在中心中的Div

2 个答案: