html - CSS – 标题显示 : table element – positioning issue

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 使事情“脱离流程”。

但是如果我看一下 Fiddle，您会注意到左侧有一个小间隙，它暴露了 .outer-wrap 上定义的灰色背景颜色:

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

Answer 1

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

更改的 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