Javascript 滚动后如何放置窗口的div中心
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2583108/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to place a div center of the window after scrolling
提问by Rajasekar
I am having a div, which should be centre of the window, even after scrolling. How to achieve it
我有一个 div，它应该是窗口的中心，即使在滚动之后也是如此。如何实现
回答by reko_t
You can do it with a fixed width positioned in center and with negative margins with half of the width and half of the height. So for a div with id your_divthat is 200x200 in size, you'd do:
您可以使用位于中心的固定宽度和一半宽度和一半高度的负边距来完成。因此，对于 idyour_div大小为 200x200的 div ，您可以执行以下操作：
#your_div {
width: 200px;
height: 200px;
position: fixed;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
}
回答by Steven Cheng
I was looking this up myself and this post came up first. With further research I found this link instead which I think is the best cross browser solution:
我自己在查这个，这个帖子最先出现。通过进一步的研究，我找到了这个链接，我认为这是最好的跨浏览器解决方案：
Using jQuery to center a DIV on the screen
Basically to use jquery to overcome the IE6 issues just take the $(window).scrollTop() and $(window).scrollLeft() into consideration.
基本上要使用 jquery 来克服 IE6 问题，只需考虑 $(window).scrollTop() 和 $(window).scrollLeft() 即可。
Hope this helps.
希望这可以帮助。
Steve
史蒂夫
回答by BotanMan
I suggest the following solution:
我建议以下解决方案：
1) In JS when you want to show a window:
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()
});
}
2) in CSS: .my-window
2) 在 CSS 中：.my-window
{
position: fixed;
}
回答by Mandai
If you have to support IE 6 then you have to append the div element to the body and set the position as "absolute". Make the position attribute of the body element as "relative". And apply the rest of the styles suggested by reko_t. That should keep the div in the center as you scroll.
如果您必须支持 IE 6，那么您必须将 div 元素附加到正文并将位置设置为“绝对”。将 body 元素的 position 属性设置为“relative”。并应用 reko_t 建议的其余样式。这应该在您滚动时将 div 保持在中心。
Apart from that, I would suggest you to consider one more case when you want to position some div in the center of the page. If your viewport's size is smaller than the div which you are positioning in the center then as you scroll you'll end up seeing the same portion of the div until you resize the window to be bigger than that of the div.
除此之外，当您想在页面中央放置一些 div 时，我建议您再考虑一种情况。如果您的视口的大小小于您定位在中心的 div，那么当您滚动时，您最终会看到 div 的相同部分，直到您将窗口大小调整为大于 div 的大小。
To solve this case, you should go for a javascript solution rather than a pure css solution. You should define a window resize listener. If the resized window's viewport is smaller then position the div in the left-top corner of the viewport and disable the onscroll listener. If the resized window's viewport is bigger than the div then your onscroll listener should apply the styles suggested by reko_t.
要解决这种情况，您应该使用 javascript 解决方案而不是纯 css 解决方案。您应该定义一个窗口调整大小侦听器。如果调整大小的窗口的视口较小，则将 div 定位在视口的左上角并禁用 onscroll 侦听器。如果调整大小的窗口的视口大于 div，则您的 onscroll 侦听器应应用 reko_t 建议的样式。
