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

Question

我想垂直和水平居中一些内容覆盖图像幻灯片（flexslider）。有一些类似的问题，但我找不到一个令人满意的解决方案，直接适用于我的具体问题。由于FlexSlider的限制，我不能在我的实现中使用img标签上的position: absolute;。

我几乎有下面的解决方法工作。唯一的问题是我无法获得宽度&高度声明inner-wrapper div与display: table-cell属性。

这是标准行为，还是我错过了我的代码？如果这是标准行为，那么对我的问题最好的解决方案是什么？

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元，所以我不能使用的line-height伎俩。

jsFiddle。

Answer 1

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

JSFiddle Link

---

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

我想对你的解答发表评论，但我有太少代表:(反正...

都会响起your answer，好像所有你需要做的就是添加display:table;内.outer-wrapper（幻觉记忆？），你可以全心全意地摆脱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> 

Full JSFiddle Solution

浏览器支持（source）：IE 11+，火狐42+，铬46+，Safari浏览器8+的iOS 8.4+（-webkit-前缀），机器人4.1+（-webkit-前缀）

CSS Tricks: a Guide to Flexbox

How to Center in CSS：输入您希望您的内容如何居中，并输出如何在html和css中执行此操作。未来就在这里！

Answer 2

How about this? (jsFiddle link)

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; 
} 

Answer 3

我想出了这一个。我知道这有助于某个人。

如何垂直&水平居中一个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这里。

Answer 4

只需添加最小高度：100％和最小宽度：100％，它将工作。我有同样的问题。你不需要第三个包装

Answer 5

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

.inner-wrapper { 
    width: 1%; 
} 

解决了这个问题。

Answer 6

欢迎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>