Question

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

将此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'属性设置为与'screen'相关，那么只有当用户最大化浏览器窗口时它才会居中。

有一个很好的方法来定位这个绝对定位的div具有高z-index，使其始终居中？

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;。

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

2 个答案: