Understanding vertical-align, or "How (Not) To Vertically Center Content" A FAQ on various IRC channels I help out on is How do I vertically center my stuff inside this area? This question is often followed by I'm using vertical-align:middle but it's not working! The problem here is three-fold: HTML layout traditionally was not designed to specify vertical behavior. By its very nature, it scales width-wise, and the content flows to an appropriate height based on the available width. Traditionally, horizontal sizing and layout is easy; vertical sizing and layout was derived from that. The reason vertical-align:middle isn't doing what is desired want is because the author doesn't understand what it's supposed to do, but … … this is because the CSS specification really screwed this one up (in my opinion)—vertical-align is used to specify two completely different behaviors depending on where it is used. vertical-align in table cells When used in table cells, vertical-align does what most people expect it to, which is mimic the (old, deprecated) valign attribute.
And. Ten CSS tricks you may not know. Max Design - CSS Centering. Vertically and Horizontally Centering a DIV. Article: Vertical Centering.