javascript - 使用jQuery透明背景居中的div

如何在所有浏览器中使div居中，在该div后面应该有一个透明的背景层，覆盖整个浏览器屏幕，如灯箱。

最佳答案

如果将div设置为固定宽度，则可以轻松使用负边距：

div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 400px;
    margin-top: -200px;
    margin-left: -300px;
    z-index: 20;
}

没有固定的高度，如果没有JavaScript，就无法将div垂直居中。使用动态高度，您可以使用以下代码段将div垂直居中（在jQuery中）：

$(function() {
    var mydiv = $('div');
    mydiv.css({
        top: $(window).scrollTop() + $(window).height() / 2 - mydiv.height() / 2
    });
});

至于透明覆盖层，只需为其提供绝对位置以及完整的宽度和高度即可：

div#overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.5;
    filter: alpha(opacity=50);
    z-index: 10;
}

如果可以放弃IE6支持，则可以简单地使用position: fixed而不是absolute，这样即使用户滚动页面，甚至在JavaScript关闭的情况下，div也会居中。