CSS : How do I vertically-center align text in a div ? (or any other elements which is not a table)

Question

To vertically-center align text in a table-cell, I use vertical-align: middle in the td.

But the above doesn't work with divs, spans, header and other non-table elements. So how can I vertically-center align text in such elements ?

Answer 1

There are many possibilities, each with it's advantages and drawbacks.

Here's a good article by Douglas Heriot explaining 5 others methods, and comparing them.