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 具有 display:table-cell 样式，

vertical-align:middle 将起作用。 带有“display:table-cell”的 div 应该有一个带有 display:table

的父 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%。