html - 在屏幕中间居中一个 'div'，即使页面向上或向下滚动？

Question

我的页面中有一个按钮，单击该按钮会在屏幕中间显示一个 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，即使页面已经滚动。

Answer 1

将 position 属性更改为 fixed 而不是 absolute。