css single or multiple line vertical align

Question

I have a title that can have one or more lines.

How can I align the text vertically? If it was always one line I could just set the line-height to the container heig

Answer 1

If you don't like the display:table trick (I know I don't) here's a solution without it:

.cen {
  min-height:5em; width:12em; background:red; margin:1em 0;
}
.cen p {
  display:inline-block; vertical-align:middle;
  margin:0 0 0 1em; width:10em;
}
.cen::after {
   display:inline-block; vertical-align:middle; line-height:5em;
   width:0; content:"\00A0"; overflow:hidden;
}

with HTML

 
Text in div 1

This gives the div a height of 5em, unless the content is heigher, then it grows.
Live example here.

Edit: Oh, which browsers is this supposed to work on? IE8 won't cooperate.

(Later edit: updated CSS to handle issues in Chrome)