在屏幕中间居中显示一个“ div”，即使当页面向上或向下滚动时也是如此吗？

我在我的页面有一个按钮，当点击显示一个 div(弹出式样)在我的屏幕中间。

我使用以下 CSS 将 div定位在屏幕中间:

.PopupPanel
{
border: solid 1px black;
position: absolute;
left: 50%;
top: 50%;
background-color: white;
z-index: 100;


height: 400px;
margin-top: -200px;


width: 600px;
margin-left: -300px;
}

只要页面不向下滚动，这个 CSS 就可以正常工作。

但是，如果我把按钮放在页面的底部，当它被点击时，div就显示在顶部，用户必须向上滚动才能查看 div的内容。

我想知道如何显示在屏幕中间的 div，即使页面已经滚动。

195537

小开

我刚刚发现了一个新的技巧，即使你没有固定的尺寸，也可以在屏幕中间放置一个盒子。假设您想要一个60% 宽度/60% 高度的盒子。使其居中的方法是创建两个框: 一个“容器”框的位置左边: 50% 顶部: 50% ，和一个“文本”框内，反向位置左边: -50% ; 顶部: -50% ;

它可以工作，而且是跨浏览器兼容的。

看看下面的代码，你可能会得到更好的解释:

jQuery('.close a, .bg', '#message').on('click', function() {
jQuery('#message').fadeOut();
return false;
});

html, body {
min-height: 100%;
}


#message {
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
}


#message .container {
height: 60%;
left: 50%;
position: absolute;
top: 50%;
z-index: 10;
width: 60%;
}


#message .container .text {
background: #fff;
height: 100%;
left: -50%;
position: absolute;
top: -50%;
width: 100%;
}


#message .bg {
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 9;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="message">
<div class="container">
<div class="text">
<h2>Warning</h2>
<p>The message</p>
<p class="close"><a href="#">Close Window</a></p>
</div>
</div>
<div class="bg"></div>
</div>