为什么width：100％在div {display：table-cell}上不起作用？

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

我几乎在工作下面有解决方法。唯一的问题是我无法inner-wrapper通过display: table-cell属性将该宽度和高度声明用于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。

把display:table;里面.outer-wrapper似乎工作...

JSFiddle链接

编辑：两个包装使用显示表单元格

我会评论你的答案，但我的代表太少了：(反正...

离开您的答案，似乎您需要做的就是在display:table;内部添加.outer-wrapper（Dejavu？），您可以table-wrapper全心全意地摆脱。

JSFiddle

但是，是的，position:absolute让您将鼠标放在div上方img，我读得太快了，以为您根本无法使用position:absolute，但似乎您已经知道了。道具！

经过99％timshutes的工作后，我将不发布源代码，因此请参考他的答案，或者仅使用我的jsfiddle链接

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

已经有一段时间了，所有很酷的孩子都在使用flexbox：

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

完整的JSFiddle解决方案

浏览器支持（源）：IE 11 +，FireFox 42 +，Chrome 46 +，Safari 8 +，iOS 8.4+（-webkit-前缀），Android 4.1+（-webkit-前缀）

CSS技巧：Flexbox指南

如何在CSS中居中：输入您希望内容居中的方式，并输出在html和CSS中的处理方式。未来就在这里！

我想通了。我知道这有一天会帮助某人的。

如何在相对位置的图像上将Div垂直和水平居中

关键是第三个包装器。我会投票赞成使用更少包装的任何答案。

的HTML

<div class="wrapper">
    <img src="my-slide.jpg">
    <div class="outer-wrapper">
        <div class="table-wrapper">
            <div class="table-cell-wrapper">
                <h1>My Title</h1>
                <p>Subtitle</p>
            </div>
        </div>
    </div>
</div>

的CSS

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

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

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

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

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

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

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

您可以在这里看到正在运行的jsFiddle。

我发现'width'的值越高，盒子的宽度就越小，反之亦然。我发现这是因为我之前有同样的问题。所以：

.inner-wrapper {
    width: 1%;
}

解决了问题。

欢迎来到2017年，这几天将使用vW并vH完成技巧

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: 100vw; /* only change is here "%" to "vw" ! */
    height: 100vh; /* only change is here "%" to "vh" ! */
}

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

100％表示100％的视口，除了宽度的％单位外，您还可以使用vw单位对其进行修复。问题是100vw与视口有关，％与父标记有关。那样做：

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

这个怎么样？（jsFiddle链接）

的CSS

ul {
    background: #CCC;
    height: 1000%;
    width: 100%;
    list-style-position: outside;
    margin: 0; padding: 0;
    position: absolute;
}
li {
 background-color: #EBEBEB;
    border-bottom: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    display: table;
    height: 180px;
    overflow: hidden;
    width: 200px;
}
.divone{
    display: table-cell;
    margin: 0 auto;
    text-align: center;
    vertical-align: middle;
    width: 100%; 

}
img {
    width: 100%;
    height: 410px;
}
.wrapper {
  position: absolute;
}

只需添加min-height：100％和min-width：100％即可。我有同样的问题。您不需要第三个包装器