在屏幕上居中div，即使页面可滚动 [英] Centering a div on screen even when the page is scrollable

问题描述

这里有一个简单的解决方案。我一直在努力使用jQuery来完成我想要的效果，但它只是不是很工作...还我怀疑有一个CSS解决方案的问题。

There has to be a easy solution to this. I have been trying to work with jQuery to accomplish the effect i am looking for but, it just isn't quite working... Also i suspect there is a CSS solution to the problem.

我有一个名为popup的div与以下CSS：

I have a div called "popup" with the following CSS:

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

div我有另一个名为#pnlEditOverlay的框，它有一个通知消息或编辑表单或类似的东西。

It covers the screen like a overlay... Inside this div i have another called #pnlEditOverlay that is a box that has a notification message or a edit form or something similar.

pnlEditOverlay是我想要的中心垂直放置在页面上

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

I use jQuery to expand the height of #popup to the document height, so that it covers everything:

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

我的问题是，我想垂直居中#pnlEditOverlay在页面上，即使页面很大

My issue is that i would like to vertically center #pnlEditOverlay on the page even if the page is large enough where it can be scrolled.

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

I have been using jQuery to reposition this 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被隐藏，直到它们滚动...

However this is not exactly what i want. It only repositions when the page is scrolled... So when the user is already scrolled halfway down the page, the div is hidden until they scroll...

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

In any case. I was wondering if there is a elegant CSS solutions to this. I simple want to put a box dead center on the page, even if the page is scrolled. I'm OK with using jQuery to set the styles of the div, however i would like to avoid implement a click event as there are MANY MANY buttons that could cause the div to be shown.

所以问题是，有一个CSS样式或一小块jQuery，将垂直居中一个div，并保持它，即使页面滚动吗？

So the questions is, is there a CSS style or a small piece of jQuery that will center a div vertically and keep it there even if the page is scrolled?

感谢

推荐答案

确实有一个简单的CSS解决方案。首先，使用弹出：

There is indeed a simple CSS solution for this. Firstly, use this for popup:

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

c>：

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

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

where x and y are half the width and height of your overlay div respectively. So you'd need to know the height and width of this div.

这将会处理你所有的问题，即使页面将被滚动。

This will take care of all your problems, even when the page will be scrolled.

这篇关于在屏幕上居中div，即使页面可滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！