CSS flexbox вертикальное/горизонтальное центральное изображение БЕЗ прямое определение родительской высоты

С только родительский 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 сам заполняет всю высоту, но не любые другие несвязанные свойства.

Ответ 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;

Ответ 2

Просто добавьте следующие правила в родительский элемент:

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;