Centering text vertically within a DIV

Source

This problem crops up often enough to make it worth documenting: How do you center text vertically within a <div>, in a way which works with Safari 3.x, Firefox 2 and 3, and IE 6?

The "line-height" solution posted by Lauri Raittila works for me. Set the line-height for the <div> to match the total height for the <div> and make sure any overflow is hidden.

Here's the relevant CSS:

.TreeNode {
  width: 8em;
  min-width: 8em;
  max-width: 8em;
  height: 2em; min-height: 2em;
  max-height: 2em;
  line-height: 2em;
  text-align: center;
  overflow: hidden;
}

And here's how it can render (Firefox 3/Mac OS X, with added CSS for borders):

TreeLayout.png