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％。