Question

如何在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;
}

有什么建议吗？

Answer 1

尝试将这两行包装在一个＆＃34;垂直中心＆＃34;容器

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

See fiddle

Answer 2

你可以试试，

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

无需显示表格单元格

垂直居中的内容

2 个答案: