Using CSS, what is the most elegant way to vertical align a short title and a description, not using a table

Not using table and

must work in IE 7 and Firefox, Chrome, Safari

The easiest way to vertically align this:

A Title (20px)
With a variable length description (12px), can be 1 lin开发者_StackOverflowe or 2 (when wrapped)

inside a div that has a width 500px, and height 60px, is probably by using a table. Without using a table, what is the most elegant way to do it?

Please do not simply give a link to a "fixed" height solution as the answer, as this can have variable height.

Update: sample and editable test: http://jsfiddle.net/mn2CH/3/

---

Take a look to this:

Vertical centering with CSS

The Method 2 (using negative margins) is the "classic" approach, I have used it a couple of times.

---

The cleanest approach I've seen that supports older versions of IE is this method. Basically, for IE, it uses a clever method of having your main container, in your case it would be 500px by 60px, and then two inner containers - one is positioned relatively with top: 50% and the other being relatively positioned with top: -50%. Intuitively, one container is positioned half way down the main container, and then the other container is moved up by half it's own height.

And of course, for newer browsers, you can use the newer display attributes on arbitrary elements, which the above article also explains.