6 ms·

display: flex; align-items: center;

• Dylan16807 8y ago
  Doesn't work unless you have an extra container div.
  • smallnamespace 8y ago
    This is true, but every 'modern' DOM that I've seen has loads of extra container divs precisely to allow post hoc layout.
    • Grumbledour 8y ago
      To be fair though, this has been a problem for quite some time and mostly stems from many web devs not understanding block and inline correctly and thus applying unneeded divs everywhere even there are enough hooks for their styles already.
  • gedy 8y ago
    Sure, because "vertically centered" means relative to what?
    • deleted 8y ago
      [deleted]
    • Dylan16807 8y ago
      I want the contents of my div to be centered inside my div. Just like <center> works, but vertically. You don't need <foo><bar>content</bar></foo> for horizontal centering. I consider it a layering violation to have to do that nesting.
      • gedy 8y ago
        Maybe we are misunderstanding each other, but while you don't need an "extra" container, you do need a container with some known height to vertically center the content in: http://jsfiddle.net/c20gq4pz/ http://jsfiddle.net/c20gq4pz/
  • jwarren 8y ago
    Or you can use the body: https://codepen.io/jodi/pen/oMvLaN https://codepen.io/jodi/pen/oMvLaN