jquery - 即使页面可滚动，也将 div 在屏幕上居中

Question

必须有一个简单的解决方案。我一直在尝试使用 jQuery 来实现我正在寻找的效果，但是，它并不是很有效...而且我怀疑有一个 CSS 解决方案来解决这个问题。

我有一个名为“popup”的 div，具有以下 CSS:

#popup {
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;}

它像覆盖层一样覆盖屏幕...在这个 div 中，我有另一个名为 #pnlEditOverlay 的框，其中包含通知消息或编辑表单或类似内容。

pnlEditOverlay 是我试图在页面上垂直居中的内容

我使用 jQuery 将#popup 的高度扩展到文档高度，使其覆盖所有内容:

$("#popup").css('height', $(document).height());

我的问题是我想在页面上垂直居中#pnlEditOverlay，即使页面足够大可以滚动。

我一直在使用 jQuery 来重新定位这个 div:

var offset = $("#pnlEditOverlay").offset();

        var topPadding = 75;
        $(window).scroll(function () {
            if ($(window).scrollTop() > offset.top) {
                $("#pnlEditOverlay").stop().animate({
                    marginTop: $(window).scrollTop() - offset.top + topPadding
                });
            } else {
                $("#pnlEditOverlay").stop().animate({
                    marginTop: 75
                });
            };
        }).scroll();

但这并不是我想要的。它只在页面滚动时重新定位...因此当用户已经滚动到页面的一半时，div 会隐藏直到他们滚动。 ..

无论如何。我想知道是否有一个优雅的 CSS 解决方案。 我只是想在页面的死点放置一个框，即使页面滚动也是如此。我可以使用 jQuery 来设置 div 的样式，但是我想要避免实现点击事件，因为有许多按钮可能会导致显示 div。

所以问题是，是否有一种 CSS 样式或一小段 jQuery 可以使 div 垂直居中并保持在该位置，即使页面滚动也是如此？

谢谢

Answer 1

确实有一个简单的 CSS 解决方案。首先，将其用于 popup:

#popup
{
position:fixed;
height:100%;
width:100%;
}

这是你的overlay:

#overlay
{
position:fixed;
top:50%;
left:50%;
margin-top:-y;
margin-left:-x;
}

x 和 y 分别是overlay div 宽度和高度的一半。所以你需要知道这个 div 的高度和宽度。

这将解决您的所有问题，即使页面会滚动也是如此。