css - 垂直居中内容

This question already has answers here:

Twitter Bootstrap 3, vertically center content [duplicate]
                                
                                    （2个答案）
                                
                        
                                2年前关闭。
            
                    
如何在Bootstrap中将身体的整个内容垂直居中？
我有两排。我尝试过使用display：table-cell，但是这些行仍在同一行中（抱歉，这是个笑话）。

的HTML

<div class="container container-table">
    <div class="row vertical-center">
        [...]
    </div>
    <div class="row vertical-center">
        [...]
    </div>
</div>

的CSS

html, body, .container-table {
    height: 100%;
}

.container-table {
    display: table;
}

.vertical-center {
    display: table-cell;
    vertical-align: middle;
}

有什么建议吗？

最佳答案

尝试将两行都包装在一个“垂直中心”容器中。

<div class="container container-table">
  <div class="vertical-center">
    <div class="row">
      [...]
    </div>
    <div class="row">
      [...]
    </div>
  </div>
</div>

See fiddle