将div集中在滚动页面上

Question

我有以下代码：

<div id="overlay" style="
    display: none;
    border: solid #aa0 10px;
    width: 75vh;
    height: 80vh;
    z-index: 650;
    position: absolute;
    left:50%; top: 50%;
    transform: translate(-50%, -50%)"
>

一开始它是隐藏的，但是如果我单击特定的屏幕元素，我会有一些jquery代码用show()显示它。

如果页面没有滚动，这将完美居中，但是，如果在用户单击屏幕元素之一时滚动页面，则覆盖层将居中显示，就好像页面没有滚动一样。 （即即使它不在视野中，它也将居中在页面顶部）。

我如何解决此问题，以便无论页面滚动到何处都可以在视口中居中？

Answer 1

您需要将位置从绝对更改为固定

<div id="overlay" style="
    display: none;
    border: solid #aa0 10px;
    width: 75vh;
    height: 80vh;
    z-index: 650;
    position: fixed;
    left:50%; top: 50%;
    transform: translate(-50%, -50%)"
>