垂直居中内容 [英] Vertically center content

问题描述

如何在Bootstrap中垂直居中放置整个身体内容？
我有两排。我已经尝试过使用display：table-cell，但是这些行却停留在同一行（对不起笑话）。

How can I vertically center the whole content of body in Bootstrap? I've two row. I've tried with display: table-cell, but the rows stays in the same row (sorry for the words joke).

HTML

HTML

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

CSS

CSS

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

.container-table {
    display: table;
}

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

有任何建议吗？

推荐答案

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

Try wrapping both rows in a single "vertical-center" container.

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

查看小提琴

这篇关于垂直居中内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！