为什么宽度：100％不工作div {display：table-cell}？
我试图垂直和水平居中一些内容覆盖图像幻灯片（flexslider）。 有一些类似的问题，但我找不到一个令人满意的解决scheme，直接适用于我的具体问题。 由于FlexSlider的限制，我不能使用position: absolute; 在我的实现img标签。
我在下面的工作几乎有解决方法。 唯一的问题是，我无法获得宽度和高度的声明，以display: table-cell属性的inner-wrapper div。
这是标准的行为，还是我错过了我的代码？ 如果这是标准的行为，我的问题最好的解决scheme是什么？
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链接
编辑：使用显示表格单元格的两个包装
我会评论你的答案，但我太less代表:(反正…
走出你的答案 ，似乎你所需要做的就是添加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解决scheme
浏览器支持（ 来源 ）：IE 11+，FireFox 42+，Chrome 46+，Safari 8+，iOS 8.4+（- -webkit-前缀），Android 4.1+（- -webkit-前缀）
CSS技巧：Flexbox指南
如何以CSS为中心 ：input你希望你的内容以什么为中心，并输出如何在HTML和CSS中做到这一点。 未来在这里！
我想出了这一个。 我知道这有助于某个人
如何在相对定位的图像上垂直和水平居中
关键是第三个包装。 我会投票任何使用较less包装的答案。
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 。
我发现“宽度”的值越高，盒子的宽度越小，反之亦然。 我发现了这一点，因为我之前有同样的问题。 所以：
.inner-wrapper { width: 1%; }
解决了这个问题。
这个怎么样？ （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; }
我很害怕我必须使用这些解决scheme之一，但只是使用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％，它将工作。 我有同样的问题。 你不需要第三个包装
