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 没有扩展到视口高度的 100%。使用检查器，我找不到任何差异。显然这里有些不对劲。

有人可以为整洁提供正确的标记以使我能够实现小提琴吗？

Answer 1

如果你想要两个并排的 div（如 Fiddle），只需制作一个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>

Answer 2

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

这个 css 使两个 div 并排放置。你也可以使用

display:inline-block;
vertical-align:top;
width:49%;

进行并排布局；将孩子和两个孩子的内容使用居中margin:0 auto，将高度作为视口使用 -

height:100vh

jsfiddle链接