Question

我有一个div，即使在滚动之后也应该是窗口的中心。如何实现

http://www.flickr.com/photos/41695354@N08/4496376638/

Answer 1

您可以使用固定宽度位于中心并使用负边距，宽度的一半和高度的一半来实现。因此，对于ID为your_div且尺寸为200x200的div，您可以执行以下操作：

#your_div {
    width: 200px;
    height: 200px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -100px;
    margin-top: -100px;
}

Answer 2

我自己看了这个，这篇文章首先出现了。通过进一步的研究，我找到了这个链接，我认为这是最好的跨浏览器解决方案：

Using jQuery to center a DIV on the screen

基本上使用jquery来克服IE6问题只需考虑$（window）.scrollTop（）和$（window）.scrollLeft（）。

希望这有帮助。

史蒂夫

Answer 3

我建议采用以下解决方案：

1）在JS中，当你想要显示一个窗口时：

{
var width = $(window).width();
var heigth = $(window).height();
var myWindow = $('.my-window');
    myWindow .show('fast');
    myWindow .offset(
    {
        left: (width - myWindow .width()) / 2 + $(window).scrollLeft(),
        top: (heigth - myWindow .height()) / 2 + $(window).scrollTop()
    });
}

CSS中的

2）：。我的窗

{
    position: fixed;
}

Answer 4

如果你必须支持IE 6，那么你必须将div元素附加到正文并将位置设置为“绝对”。将body元素的position属性设置为“relative”。并应用reko_t建议的其余样式。这应该在滚动时将div保持在中心位置。

除此之外，如果您想在页面中心放置一些div，我建议您再考虑一个案例。如果您的视口大小小于您在中心定位的div，那么当您滚动时，您最终会看到div的相同部分，直到您将窗口大小调整为大于div的大小。

要解决这种情况，你应该寻求一个javascript解决方案，而不是一个纯粹的CSS解决方案。您应该定义一个窗口调整大小监听器。如果调整大小的窗口的视口较小，则将div放在视口的左上角并禁用onscroll侦听器。如果调整大小的窗口的视口大于div，那么您的onscroll侦听器应该应用reko_t建议的样式。

滚动后如何放置窗口的div中心

4 个答案: