Html 中心a'；分区'；在屏幕中间，即使页面是向上滚动还是向下滚动？

我在页面中有一个按钮，点击时在屏幕中部显示<代码> div （弹出式）。< /p>

我在屏幕中部使用下面的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/<代码>，即使页面已经滚动。

< p>将<代码>位置>代码>属性> <代码>固定< /代码>，而不是<代码>绝对< /代码> .< /p> < p>更改<代码>位置：绝对值；<代码>至<代码>位置：固定

<强>引用：我想知道如何在中间显示DIV。 屏幕，用户是否已向上/向下滚动

改变

position: absolute;

到

---

---

<和> W3C规范和<

> P>我只是发现了一个新的技巧，即使屏幕上没有固定的尺寸，也可以在屏幕中间把一个盒子放在中间。假设您想要一个60%宽/60%高的盒子。使其居中的方法是创建两个框：一个位于左侧的“容器”框：50%顶部：50%，一个位于内部的“文本”框，反向位置左侧：-50%；前-50%

它可以工作，并且可以跨浏览器兼容

查看下面的代码，您可能会得到更好的解释：

jQuery（'.close a，.bg'，'#message'）。在（'click'，function（）上）{
jQuery（'#message'）.fadeOut（）；
返回false；
});
html，正文{
最小高度：100%；
}
#信息{
身高：100%；
左：0；
位置：固定；
排名：0；
宽度：100%；
}
#消息容器{
身高：60%；
左：50%；
位置：绝对位置；
最高：50%；
z指数：10；
宽度：60%；
}
#message.container.text{
背景：#fff；
身高：100%；
左-50%；
位置：绝对位置；
前-50%；
宽度：100%；
}
#留言{
背景：rgba（0,0,0,0.5）；
身高：100%；
左：0；
位置：绝对位置；
排名：0；
宽度：100%；
z指数：9；
}

警告
信息


正确的方法是

.PopupPanel
{
    border: solid 1px black;
    position: fixed;
    left: 50%;
    top: 50%;
    background-color: white;
    z-index: 100;
    height: 400px;
    margin-top: -200px;

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

如果你需要滚动弹出的div并且它比屏幕大，那该怎么办？记住这不是响应最快的解决方案（而是解决上述问题的完美方案）。检查并查看您的开发工具，以获得有关使用弹出窗口/模态的一些好主意。为什么要减去页边距顶部：（200）和页边距左侧。我觉得这是高度和宽度的中间点，但为什么我们必须这样做才能得到绝对中心呢？左50%和前50%不应该这样做吗？@jmoon90
left:50%；顶部：50%
将
.popupanel
的左上角移动到屏幕中央。然后我们把它移到一半的宽度和高度，回到中心，它的中心。看见
.PopupPanel
{
    border: solid 1px black;
    position: fixed;
    left: 50%;
    top: 50%;
    background-color: white;
    z-index: 100;
    height: 400px;
    margin-top: -200px;

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