69

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

我几乎有以下工作的解决方法。唯一的问题是我无法让宽度和高度声明在具有该属性 的inner-wrapperdiv 上工作。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 技巧。

js小提琴。

4

7 回答 7

78

装display:table;进去.outer-wrapper好像还行……

JSFiddle 链接

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

我会评论你的答案，但我的代表太少了:(无论如何......

离开你的答案，似乎你需要做的就是在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>

完整的 JSFiddle 解决方案

浏览器支持（来源）：IE 11+、FireFox 42+、Chrome 46+、Safari 8+、iOS 8.4+（-webkit-前缀）、Android 4.1+（-webkit-前缀）

CSS 技巧：Flexbox 指南

如何在 CSS 中居中：输入您希望内容如何居中，并输出如何在 html 和 css 中进行居中。未来就在这里！

于 2013-07-19T01:38:57.007 回答
12

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

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

于 2013-07-19T02:04:56.880 回答
7

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

.inner-wrapper {
    width: 1%;
}

解决问题。

于 2017-02-03T02:11:26.617 回答
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>

于 2017-07-04T14:58:43.743 回答
1

您的 100% 表示 100% 的视口，您可以使用除宽度的 % 单位之外的 vw 单位来解决此问题。问题是 100vw 与视口有关，此外 % 与父标签有关。这样做：

.table-cell-wrapper {
    width: 100vw;
    height: 100%;  
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
于 2018-06-30T13:19:27.110 回答
0

这个怎么样？（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;
}
于 2013-07-19T01:19:24.067 回答
-3

只需添加 min-height:100% 和 min-width:100% 即可。我有同样的问题。你不需要第三个包装器

于 2015-05-05T17:03:24.177 回答