html - 为什么宽度是: 100% not working on div {display: table-cell}?

Question

我正在尝试将覆盖图像幻灯片 (flexslider) 的一些内容垂直和水平居中。有一些与此类似的问题，但我找不到直接适用于我的特定问题的令人满意的解决方案。由于 FlexSlider 的限制，我无法在实现中的 img 标签上使用 position: absolute;。

我几乎有下面的解决方法。唯一的问题是我无法使用 display: table-cell 属性在 inner-wrapper div 上使用宽度和高度声明。

这是标准行为，还是我的代码遗漏了什么？如果这是标准行为，那么什么是解决我的问题的最佳方法？

HTML

<ul>
    <li>
        <img src="#">
        <div class="outer-wrapper">
            <div class="inner-wrapper">
                <h1>My Title</h1>
                <h5>Subtitle</h5>
            </div>
        </div>
    </li>
</ul>

CSS

html, body {
    margin: 0; padding: 0;
    width: 100%; height: 100%;
}

ul {
    background: #CCC;
    height: 100%;
    width: 100%;
    list-style-position: outside;
    margin: 0; padding: 0;
}

li {
    width: 100%;
    display: table;
}

img {
    width: 100%;
    height: 410px;
}

.outer-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    margin: 0; padding: 0;
}

.inner-wrapper {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 100%;
    height: 100%;
}

注意:居中的内容将超过 1 个元素，所以我不能使用行高技巧。

jsFiddle .

Answer 1

将 display:table; 放入 .outer-wrapper 似乎有效...

JSFiddle Link

---

编辑:使用显示表格单元格的两个包装器

我会评论你的回答，但我的代表太少 :( 无论如何......

关闭 your answer ，似乎您需要做的就是在 .outer-wrapper (Dejavu？)中添加 display:table; ，然后您就可以摆脱table-wrapper 全心全意。

JSFiddle

但是，是的，position:absolute 允许您将 div 放在 img 上，我读得太快了，我认为您不能根本不使用 position:absolute，但似乎您已经想通了。 Prop !

我不打算发布源代码，毕竟它的 99% 是 timshutes 的工作，所以请引用他的回答，或者使用我的 jsfiddle 链接

更新:一个使用 Flexbox 的包装器

已经有一段时间了，所有酷 child 都在使用 flexbox:

<div style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
    stuff to be centered
</div>

Full JSFiddle Solution

浏览器支持 ( source ): IE 11+, FireFox 42+, Chrome 46+, Safari 8+, iOS 8.4+ (-webkit- prefix), Android 4.1+ (- webkit- 前缀)

CSS Tricks: a Guide to Flexbox

How to Center in CSS :输入您希望内容居中的方式，并输出如何在 html 和 css 中执行此操作。 future 已来!