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

somthing like this

HTML

<div>
    <p>
       Lorem Ipsum is simply
    </p>
</div>

CSS

div {
   display: table;
}
p {
   display:table-cell;
   vertical-align: middle;
}

Answer 2

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

<div class="cen">
 <p>Text in div 1</p>
</div>

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)