如何在调整浏览器大小后水平居中显示模式div？

Question

我正在尝试使用jquery向DOM中添加一项。我希望它覆盖在所有其他内容的顶部(z-index)(已经有数百个z-index集)，并且应该始终居中对齐。

在将这个div添加到DOM时，我将其'left‘属性设置为$(window).width()/2 - 971 /2.971是我试图添加的div的宽度。这是它的CSS

width: 971px;
height: 669px;
background-image: url(/path/to/image/);
position: absolute;
margin: 0px auto;
z-index: 2500; 

问题是，在浏览器调整大小后，div不会居中。我甚至尝试过left: 50%和一些负的左边距(像素)。如果我设置了与“screen”相关的“left”属性，那么只有当用户最大化浏览器窗口时，它才会居中。

什么是一个好的方式来定位这个绝对定位的div与高的z索引，使其始终居中？

Answer 1

#someId{
    width: 971px;
    height: 669px;
    padding: 0;
    border: 0;

    margin-left:-486px; /* 971/2 */
    margin-top:-335px; /* 669/2 */

    position: fixed;
    left: 50%;
    top: 50%;

    background-image: url(/path/to/image/);
    z-index: 2500;
}

我知道你说过你试过了--但这对我在任何标准兼容模式(甚至ie)下运行的浏览器都是有效的，它可能会因为没有考虑边框或填充而被抛出。下面是一个有效的示例：http://jsfiddle.net/U3RrT/

我刚刚意识到这可能是因为您在它上面设置了一个具有不同position属性的元素；试试position:fixed;。

Answer 2

首先，margin: 0px auto;足以水平居中放置一个div。因此，只需删除left属性就可以解决此问题。

如果不是，因为您使用的是jQuery，所以有一个.resize()事件window，您可以控制该事件来再次修复外观。

例如

function resizeMyBox() {
  //code to resize
}       
$(function() {
   resizeMyBox();  // Resize on DOM ready
});
$(window).resize(function() {
   resizeMyBox(); //Resize again on every resize
});