垂直居中在沒有高度的元素含量，但填充

Question

小提琴：http://jsfiddle.net/dbwvx42s

問題描述：我使用引導到一個區間內進行一些列。該部分具有零高度（例如height: 0），但是爲了保持頁面上其他內容的縱橫比（16：9），56.25％的底部填充。

我遇到的問題是如何垂直居中這個零高度，填充元素的內容。我試圖使用flexbox解決方案無濟於事。我試過內聯阻塞內容，並使用垂直對齊，這也是一個不行。我正在用盡技巧！

任何幫助表示讚賞。

代碼：

#section-1 { 
    background-color: #0099cc; 
    color: #fff; 
    height: 0; 
    padding-bottom: 56.25%; 
} 

Answer 1

您可以創建包含內容的絕對定位的子元素：

#section-1 { 
 
    
 
    position: relative; 
 
    
 
    background-color: #0099cc; 
 
    color: #fff; 
 
    height: 0; 
 
    padding-bottom: 56.25%; 
 
} 
 

 
#section-1 div.content { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    
 
}

<div id="section-1"> 
 
    <div class="content"> 
 
    Content goes here 
 
    </div> 
 
</div>

現在，div.content可以作爲一個正常大小的DIV。