CSS垂直对齐DIV到中间

当我们不知道容器的高度时，我试图在容器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;
}

---

​

垂直对齐：如果div具有显示：表格单元格样式，则中间对齐将起作用。 带有“display:table cell”的Div应该有一个带有display:table的父Div

将以下html放入

试验

因此最终标记将如下所示

<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>​

试验
​

看看这个

我添加了.full-width、.full-height类以设置宽度和高度100%。

可能的重复：

<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>​