CSS flexbox 垂直/水平居中图像而不显式定义父高度

Question

仅 父div 和子img 元素如下所示我如何垂直和水平将 img 元素居中，同时明确不定义父 div 的高度？

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

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

Answer 1

只需将以下规则添加到父元素:

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

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

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

为了 display: flex 和 align-items 的跨浏览器兼容性，您还可以添加旧的 flexbox 语法:

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;