How Do I Vertically Center The Text Within A Flex Element?

Is there a special way to vertically center text in an element using flexboxes (or other pure CSS)? Fiddle: http://jsfiddle.net/WK_of_Angmar/JZZWg/

Solution 1:

Using line-height is one solution, here's the link to Fiddle.

Update: I took a little more interest in the flex model and found the centering properties, so I guess this makes a better solution for you (although not that neat and elegant because of all the prfixes). Here is the link to Fiddle using flex properties for alignment.

And here is a link that explains the usage of the properties.

Share