动态高度

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的高度。

也许有人有更好的技术。