如何在滚动后将一个 div 置于窗口中心

Question

我有一个div，希望它在滚动后仍然居中于窗口。如何实现？

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

- Rajasekar

Answer 1

您可以使用固定宽度的定位方式将其置于中心，并通过负边距设置宽度和高度的一半来实现。因此，对于大小为200x200的带有id your_div 的div元素，您可以这样做：

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

- reko_t

---

“fixed”不是IE6支持的定位属性值（http://www.quirksmode.org/css/position.html） - James Hughes

我们不应该为IE6制作网站，这样就没有人会使用它，而且我们今天面临的问题也就会少很多。 - ant

现在已经是2014年的中间了，我们可以放弃使用IE6了吗？ - T.W.R. Cole

0.15%的用户使用IE6。由你决定 :P - aug

根据http://www.w3schools.com/browsers/browsers_explorer.asp的数据，目前我们在IE6上的用户数量已经不足以支持其继续使用。可以安全地放弃它了。 - klewis

Answer 2

我本来自己在查找这个问题，但是最先出现的是这篇文章。经过进一步的研究，我找到了这个链接，我认为这是最好的跨浏览器解决方案：

使用jQuery将DIV居中显示在屏幕上

基本上，为了使用jquery来解决IE6的问题，只需考虑$(window).scrollTop()和$(window).scrollLeft()。

希望这可以帮到你。

Steve

- Steven Cheng

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中： .my-window

{
    position: fixed;
}

- BotanMan

Answer 4

如果您需要支持IE 6，则必须将div元素附加到body并将位置设置为“absolute”。将body元素的position属性设置为“relative”。并应用reko_t建议的其余样式。这样，当您滚动时，div应该保持在中心。

除此之外，我建议您考虑另一种情况，即当您想要将某个div定位在页面中心时。如果您的视口大小小于您要定位在中心的div，则当您滚动时，您将看到相同部分的div，直到您将窗口调整为大于div的大小。

为了解决这种情况，您应该选择JavaScript解决方案而不是纯CSS解决方案。您应该定义一个窗口调整大小的监听器。如果调整大小的窗口视口较小，则将div定位在视口的左上角并禁用onscroll监听器。如果调整大小的窗口视口大于div，则您的onscroll监听器应该应用reko_t建议的样式。

- Mandai