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