動態高度

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

也許有人有更好的技術。