即使在调整浏览器大小后，如何水平居中模态 div

Question

我正在尝试使用jquery将一个项目添加到DOM。我希望它覆盖在所有其他内容的顶部（z-index）（已经设置了数百个z索引），并且它应该始终居中对齐。

在将此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 不会保持居中。 我什至尝试过左边距：50% 和一些负左边距（以像素为单位）。如果我设置与"屏幕"相关的"left"属性，则仅当用户最大化浏览器窗口时，它才会居中。

用高 z 指数定位这个绝对定位的div 使其始终居中有什么好方法？

Answer 1

首先，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
});

Answer 2

#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;
}

我知道你已经说过你试过这个 - 但这在以符合标准的模式运行的任何浏览器中一直对我有用（即使）它可能因不考虑边框或填充而被抛弃。下面是一个工作示例：http://jsfiddle.net/U3RrT/

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