3 ms·

"display: table-cell" with "vertical-align: middle" works.

• halisaurus 13y ago
  That this is missing is surprising. This method is the most compatible across browsers and only real drawback is the additional markup.
  • straws 13y ago
    Well, of course it comes with gotchas: - if that item is "display: table-cell", it must be within a larger element that's "display: table" or "display: table-row" - "vertical-align: middle" works also for inline-block elements, but that means it's subject to all the other gotchas present in the article about explicit sizing It eventually makes a kind of sense, but these rules are passed down in folklore and trial-and-error.
    • robin_reala 13y ago
      Your first point isn’t correct: if you have a solitary element with display:table-cell it’ll generate the appropriate anonymous elements needed for display. http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes