CSS flexbox垂直/水平中心图像没有明确定义父高度

Question

与只有父div和子img元素作为证明下面我怎么垂直和水平居中img,而元素明确不定义height父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 */

这是一个示例演示(调整窗口以查看图像对齐)

如今对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;

Answer 2

没有明确定义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>