CSS flexbox垂直/水平居中图像而不明确定义父高度答案

【问题标题】：CSS flexbox vertically/horizontally center image WITHOUT explicitely defining parent heightCSS flexbox垂直/水平居中图像而不明确定义父高度
【发布时间】：2014-11-08 01:15:42
【问题描述】：

only 父 div 和子 img 元素如下所示我如何垂直和水平居中 img 元素而 明确不定义父div的height？

<div class="do_not_define_height">
 <img alt="No, he'll be an engineer." src="theknack.png" />
</div>

我对 flexbox 不太熟悉，所以如果 flexbox 本身填满整个高度，但没有任何其他不相关的属性，我可以。

【问题讨论】：

标签： css flexbox

【解决方案1】：

在没有明确定义height 的情况下，我确定我需要将flex 值应用于父元素和祖父div 元素...

<div style="display: flex;">
<div style="display: flex;">
 <img alt="No, he'll be an engineer." src="theknack.png" style="margin: auto;" />
</div>
</div>

如果您使用单个元素（例如，单个 flex 元素中的死中心文本），请使用以下内容：

align-items: center;
display: flex;
justify-content: center;

【讨论】：

对垂直和水平居中图像感兴趣，而无需明确设置其父级的高度。我有一系列图像，并希望最高图像的高度成为父图像的高度并将所有其他同级图像居中。看起来你可能有一些东西，你有演示吗？
嗨，史蒂夫，今晚我会在我的网站上发布一些内容（请参阅个人资料），请记住我会迟到。
嘿，约翰，别担心，只要你能发布它，我就感谢它，伙计！提前致谢！
@Steve 迟到总比没有好？ jabcreations.com/blog/… 旧版浏览器（例如 Safari 5 和 IE）也存在一些问题。

【解决方案2】：

只需在父元素中添加以下规则：

display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */

这是一个sample demo（调整窗口大小以查看图像对齐）

Browser support 现在的 Flexbox 已经相当不错了。

对于display: flex 和align-items 的跨浏览器兼容性，您也可以添加旧的弹性框语法：

display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

【讨论】：

这定义了height，我明确声明我可以不定义height，除了flexbox。
@John - 不，它没有定义高度 - 小提琴中的高度仅用于测试....当您调整窗口大小时，您可以看到容器的高度改变并且img 仍然居中。您可以删除高度规则，它适用于容器的任何高度。
@John - 不！在你的分叉小提琴中，父 div 的高度是图像的高度！！！所以很明显它不会对齐。为了使图像居中，它必须位于一个宽度和高度大于图像的容器内。
@John 不！容器的高度可以是任何东西，只要它大于图像。插入任何你想要的高度值，flexbox 会将它居中。
我想通了并发布了答案。我讨厌花时间帮助人们被冷落，所以我给你 +1 的时间。谢谢！