在bootstrap中使用“table-cell”进行垂直居中

Question

我想使用＆＃34; table-cell＆＃34;垂直和水平居中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标记在视口底部之前结束：

至少你必须告诉浏览器html和body元素的高度至少为100％：

html, body {
    height: 100%;
}

除了指定容器section的高度外：

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

这是一个更新的小提琴：http://jsfiddle.net/2ntK2/3/