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.
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;
Just add the following rules to the parent element:
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
Here's a sample demo (Resize window to see the image align)
Browser support for Flexbox nowadays is quite good.
For cross-browser compatibility for display: flex and align-items, you can add the older flexbox syntax as well:
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;
Source: Stackoverflow.com