html - 具有动态高度的居中灯箱

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%，然后设置元素的上边距 negitave 半高。

因为你不知道你必须使用 JS 的高度。

也许有人有更好的技术。