html为什么table不能撑满屏幕,html – 为什么width：100％不能在div {display：table-cell}上工作？...

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

我几乎有解决方法下面工作。唯一的问题是我不能得到宽度&高度声明使用display：table-cell属性对inner-wrapper div进行工作。

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

HTML

• 

  My Title

  Subtitle

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个元素，因此我不能使用行高技巧。