Search code examples
cssflexbox

CSS flexbox vertically/horizontally center image WITHOUT explicitely defining parent 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>

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.

Solution

  • 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>

    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;