CSS Flex Box: How to vertically align “flex items” to middle without losing flex item height?

Question

Currently my \"flex\" items look like this (vertically aligned: top)...

 _____________________________________
   1

 _____________________________________
          


        

Answer 1

Your problem is not really related to the so-called flex-box, in fact what you want to align is the content of the div (not the div), so just use some trick to align it normarlly. Here is one of the tricks:

div:before {
  content:'';
  height:100%;
  display:inline-block;
  vertical-align:middle;
}

Demo.