为啥宽度：100% 不适用于 div display: table-cell？

Posted 2023-03-05

【中文标题】为啥宽度：100% 不适用于 div display: table-cell？

【英文标题】：Why is width: 100% not working on div display: table-cell?为什么宽度：100% 不适用于 div display: table-cell？

【发布时间】：2013-07-18 04:15:15

【问题描述】：

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

我几乎有以下工作的解决方法。唯一的问题是我无法使用 display: table-cell 属性使宽度和高度声明在 inner-wrapper 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 个元素，所以我不能使用 line-height 技巧。

jsFiddle.

【参考方案1】：

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

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

【参考方案2】：

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

【参考方案3】：

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

.inner-wrapper 
    width: 1%;

解决问题。

【讨论】：

欢迎来到 ***！虽然答案总是很受欢迎，但这个问题是 3 年前提出的，并且已经有了一个公认的解决方案。请尝试通过提供答案来避免将问题“颠倒”到顶部，除非该问题尚未标记为已解决，或者您找到了解决该问题的更好的替代方法:)

当内部包装器有任何带有display: table-cell 的兄弟姐妹时，此解决方案不起作用

可能是迄今为止我找到的最快的解决方案。谢谢老兄。

【参考方案4】：

将display:table; 放入.outer-wrapper 似乎可行...

JSFiddle Link

---

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

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

离开your answer，似乎你需要做的只是在.outer-wrapper 中添加display:table;（似曾相识？），然后你就可以全心全意地摆脱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 中输出如何做到这一点。未来已来！

【讨论】：

我需要上面的文字 - 覆盖在图像的顶部。

应该注意的是，当您将带有标记的内联文本居中时，flexbox 居中的行为很有趣——这会被视为inline-block 元素。

已经有一段时间了，但是这个答案比我原来的答案好。谢谢！

【参考方案5】：

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

【参考方案6】：

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

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

【参考方案7】：

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;

【讨论】：

这个解决方案修复了水平对齐，但不是垂直对齐（我也希望居中）。此外，在我看来，将浮点数放在表格单元格元素内并不是最佳做法。但这可能不是真的。

你想让 div 内容居中吗？

还没有在那儿做...文本在左边。我希望它居中。我终于解决了这个问题。您可以在此处查看解决方案：jsfiddle.net/timshutes/5pAA3/6 或在上面的答案中。