CSS - 显示中的标题：表格元素 - 定位问题

Question

在创建HTML布局时，我注意到一些我无法解决的奇怪定位问题。

采用以下HTML：

<div class="outer-wrap">
<div class="header">
    I am a Header
</div>
<div class="element">
    Hello world
</div>

并结合此CSS代码：

@import "https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.css";

html, body { height: 100%; }

.outer-wrap {
    width: 100%;
    height: 100%;
    display: table;
    background: grey;
}

.element {
    display: table-cell;
    vertical-align: middle;
    background: blue;
}

.header {
    position: absolute;
    background: red;
}

Fiddle

正如您所看到的，我已将包装器设置为display: table，这使我能够使用display: table-cell和vertical-align: middle设置所有子元素的垂直居中。

现在当我尝试添加标题时，奇怪的事情开始发生。

首先，我必须在标题上声明position: absolute，否则标题会水平推送.element。我不知道为什么会发生这种情况，但我理解为什么这个修复工作正常：因为position: absolute将事情从流程中解脱出来。

但如果我看一下小提琴，你会发现左侧有一个小间隙，露出了.outer-wrap上定义的灰色背景颜色：

造成这种差距的原因是什么？如何解决这个问题？ 为什么我必须在标题上使用绝对定位使其扩展到整个容器宽度？

Answer 1

导致这种情况的关键原因是你没有定义表格单元格并且不会100％宽，你会看到它向右移动看到灰色边框颜色，这是外包装div的背景。因此，当您使用width:100%;使其正确显示时，您需要定义display:table-cell;。

更改了css：

.outer-wrap {
    width: 100%;
    height: 100%;
    display: table;
    background: grey;
}

.element {
    display: table-cell;
    vertical-align: middle;
    background: blue;
    width: 100%;/*explicitly define width to be 100%*/
}

.header {
    position: absolute;
    background: red;
    z-index: 1;/*to make it display in front*/
}

Fixed fiddle