为什么宽度:100%不在div {display:table-cell}上工作？

Question

我试图垂直和水平地居中覆盖图像幻灯片(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.

Answer 1

放在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中执行此操作.未来就在这里!

Answer 2

我想出了这一个.我知道有一天这会对某人有所帮助.

如何在相对定位的图像上垂直和水平居中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 3

我发现'width'的值越大,盒子宽度越小,反之亦然.我发现了这个,因为我之前遇到了同样的问题.所以:

.inner-wrapper {
    width: 1%;
}

解决了这个问题.

Answer 4

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