3 ms·

Horizontal and vertical centering - needs a height on the parent which is omitted from the example.

• Someone1234 9y ago
  This always irks me. People provide a CSS example but omit that the parent needs to be position relative, only works with absolute positioning (which it isn't set to in the example), only certain element types, or that the tree needs a higher z-index than the sibling or it won't work. At least on Stackoverflow someone often remarks in a reply about the gotcha/limitation.
  • iaml 9y ago
    To be fair, centering with flex doesn't require the parent to have any particular positioning set. The only reason you need to set the width/height is because the centering happens inside 0 size box, which wouldn't happen if your problem is centering something inside existing box.
• 8ig8 9y ago
  Here’s a method with an unknown height... http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ http://zerosixthree.se/vertical-align-anything-with-just-3-l...
  • oneeyedpigeon 9y ago
    The flexbox method does work with an unknown height. The point is that the container has to actually have a height (one way or another) that is greater than the height of the aligned element, otherwise vertical alignment is all equal anyway! This is as true of the flexbox approach as it is in your example (which explicitly sets the containing 'section' element's height).