Question

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

我几乎有下面的工作方法。唯一的问题是我无法获得宽度和宽度。使用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 Link

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

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

关闭your answer，您需要做的就是在display:table;（Dejavu？）中添加.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 +，FireFox 42 +，Chrome 46 +，Safari 8 +，iOS 8.4 +（-webkit-前缀），Android 4.1 +（-webkit-前缀）

CSS Tricks: a Guide to Flexbox

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

Answer 2

我想出了这个。我知道有一天这会有所帮助。

如何垂直＆amp;在相对定位的图像上水平居中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来解决问题

＆＃13;

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" ! */
}

＆＃13;

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

＆＃13;

Answer 5

您的100％表示100％的视口，您可以使用vw单位（宽度单位为％单位）修复该问题。问题是100vw与视口有关，％与父标记有关。这样做：

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

Answer 6

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 7

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

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

7 个答案: