CSS flexbox垂直/水平居中放置图像，而无需显式定义父级高度 [英] CSS flexbox vertically/horizontally center image WITHOUT explicitely defining parent height

问题描述

仅使用 父级div和子级img元素，如下所示，如何在时垂直和垂直放置img元素居中明确不定义父级div的height?

With only the parent div and the child img elements as demonstrated below how do I vertically and horizontally center the img element while explicitly not defining the height of the parent div?

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

我对flexbox不太熟悉，所以我可以接受flexbox本身的高度，但不会填充其他无关的属性.

I'm not too familiar with flexbox so I'm okay if flexbox itself fills up the full height, but not any other unrelated properties.

推荐答案

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

Without explicitly defining the height I determined I need to apply the flex value to the parent and grandparent div elements...

<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元素中居中的文本)，请执行以下操作:

---

If you're using a single element (e.g. dead-centered text in a single flex element) use the following:

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

这篇关于CSS flexbox垂直/水平居中放置图像，而无需显式定义父级高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！