Question

我正在制作一个灯箱。我需要根据其内容动态调整大小。但我也需要它在屏幕中居中。我正在尝试这样的事情：

HTML：

<div class="lightbox-background">
    <div class="lightbox">
        LIGHTBOX CONTENT
    </div>
</div>

CSS：

.lightbox-background {
    background-color: rgba(0,0,0,0.9);
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 50;
}

.lightbox {
    background-color: white;
    width: 780px;
    z-index: 100;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    height: auto !important;
    max-height: 90%;
}

我无法使它发挥作用。如果可能的话，我想避免使用JS。我该怎么办？

Answer 1

您可以使用vertical-align: middle以及父容器上的:before选择器。看看我的小提琴：

<强> http://jsfiddle.net/GA5K3/2/

Answer 2

我知道使用CSS垂直居中的最佳方法是绝对位置前50％然后设置上边距否定元素的半高。

由于你不知道你必须使用JS的高度。

也许有人有更好的技巧。

中心灯箱，动态高度

2 个答案: