css single or multiple line vertical align

Solution 1:

For this you can use display:table-cell property:

.inline {
  display: inline-block;
  margin: 1em;
}
.wrap {
  display: table;
  height:  100px;
  width:   160px;
  padding: 10px;
  border:  thin solid darkgray;
}
.wrap p {
  display:        table-cell;
  vertical-align: middle;
}

<div class="inline">
  <div class="wrap">
    <p>Example of single line.</p>
  </div>
</div>

<div class="inline">
  <div class="wrap">
    <p>To look best, text should really be centered inside.</p>
  </div>
</div>

But it works IE8 & above. Read this article for more info: CSS Tricks: Vertically Center Multi-Lined Text.

Solution 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)