css - 内容居中的 100% 高度 div

Question

我正在尝试重新创建:http://jsfiddle.net/MGRdP/6/

html, body{
  height:100%;
}

.table {
    width: 100%;
    display: table;
    height:100%;
}

.cell {
    border: 2px solid black;
    vertical-align: middle;
    display: table-cell;
    height:100%;
}

<div class="table">
    <div class="cell">
        <p>Text</p>
    </div>
</div>
<div class="table">
    <div class="cell">
        <p>Text</p>
    </div>
</div>

使用 Neat，但我的 div 没有扩展到视口(viewport)高度的 100%。使用检查员，我找不到任何差异。显然这里有些不对劲。

有人可以为 neat 提供正确的标记，使我能够像 fiddle 那样实现吗？

Answer 1

如果你想要并排放置两个 div(如 Fiddle)，只需将每个 div 设为 width:50% 和 float:left

html, body{
  height:100%;
}

.table {
    width: 50%;
    display: table;
    height:100%;
    float:left;
}

.cell {
    border: 2px solid black;
    vertical-align: middle;
    display: table-cell;
    height:100%;
}

<div class="table">
    <div class="cell">
        <p>Text</p>
    </div>
</div>
<div class="table">
    <div class="cell">
        <p>Text</p>
    </div>
</div>