CSS垂直對齊DIV到中間

Question

我想在容器div的中心水平和垂直放置一個div元素，當我們不知道容器的高度時。

我已經通過絕對定位設置了容器元素以適應文檔的全部高度和寬度，但無法獲得垂直對齊。

.ui .chv { 
    text-align: center; 
    position: absolute; 
    top: 60px; 
    bottom: 50px; 
    left: 20px; 
    right: 20px; 
    display: block; 
    margin: 0; 
    height: auto; 
    background: green; 
    text-align: center; 
    vertical-align: middle; 
} 

LIVE DEMO

Answer 1

垂直對齊：表細胞風格：如果DIV有顯示器中間會工作。 事業部以 「顯示：表細胞」 應該有顯示父DIV：

認沽下面的HTML裏面<div class="chv"></div>

<div class="table full-width full-height">   
      <div class="table-cell align-middle"> 
       TEST 
      </div> 
</div> 

表，所以最終的標記會是這樣

<div align="center" class="ui"> 
    <div class="chv"> 

     <div class="table full-width full-height">   
      <div class="table-cell align-middle"> 
       TEST 
      </div> 
     </div>  

    </div>  
</div>​ 

看到這個在jsfiddle

我添加了.full-width，.full-height類來設置寬度和高度100％。