html - 在 bootstrap 中使用 "table-cell"垂直居中

Question

我想使用“table-cell”方法将 div 垂直和水平居中，因为它不需要特定的高度，但不幸的是，如果不指定高度就无法工作。

为什么不工作？

我有这个标记:

<section class="content-01 v-center">
<div>
  <div class="container">
    <div class="slogan text-center">
      <h1>VERTICAL CENTERING</h1>
    </div>
  </div>
</div>

和这个CSS:

.content-01.v-center {
display: table;
width: 100%;

}

.content-01.v-center>div {
display: table-cell;
vertical-align: middle;
margin-top: 0;
margin-bottom: 0;
float: none;
}  

这是一个 jsfiddle

知道我做错了什么吗？谢谢!

Answer 1

这里的问题是 html 和 body 标签在视口(viewport)底部之前结束:

至少您必须告诉浏览器 html 和 body 元素的高度至少为 100%:

html, body {
    height: 100%;
}

以及指定容器 section 的高度:

.content-01.v-center {
    /* ... */
    height: 100%;  
}

这是一个更新的 fiddle :http://jsfiddle.net/2ntK2/3/