Question

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

Answer 1

如果你给div一个固定的宽度，很容易使用负边距：

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

如果没有固定的高度，则无法在没有JavaScript的情况下垂直居中div。使用动态高度，您可以使用这样的片段（在jQuery中）垂直居中div：

$(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也会居中。

带有jQuery透明背景的居中div

1 个答案: