内容垂直居中

Question

如何在 Bootstrap 中垂直居中 body 的全部内容？我有两排。我试过显示：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;
}

有什么建议吗？

Answer 1

你可以试试，

 .content-table{
    position: relative;
    transform: translateY(-50%);
    top: 50%;
    display: block;
   }

不需要显示table-cell

Answer 2

尝试将两行包装在一个 "vertical-center" 容器中。

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

See fiddle

内容垂直居中

Vertically center content

css

twitter-bootstrap

vertical-alignment

css-tables