CSS flexbox vertically horizontally center image WITHOUT explicitely defining parent height

Question

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    lt div class  do not define height  gt    lt img alt  No  he ll be an engineer   src  theknack png    gt   lt  div gt    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

User · Answer

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;

User · Answer

Without explicitly defining the height I determined I need to apply the flex value to the parent and grandparent div elements      lt div style  display  flex   gt   lt div style  display  flex   gt    lt img alt  No  he ll be an engineer   src  theknack png  style  margin  auto     gt   lt  div gt   lt  div gt      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] CSS flexbox vertically/horizontally center image WITHOUT explicitely defining parent height

Examples related to css

Examples related to flexbox