title: CSS to vertically align text to middle of div
body: <p>What is the correct way to force text in a div to vertically align to the middle?
  I have found a couple 'tricks', but I need something that works with a single line and multiple lines. Hopefully I am missing something stupid simple:</p>
  
  <p><a href="http://jsfiddle.net/rogerguess/DawFy/">http://jsfiddle.net/rogerguess/DawFy/</a></p>
  
  <pre><code>.header {
      display: inline-block;    
      text-align: center;
      width: 123px;
      background: green;
      border-radius: 4px 4px 4px 4px;
      height: 80px;
      vertical-align: middle;
  }
  
  &lt;div &gt;
      &lt;div class="header"&gt;test1 &lt;/div&gt;
      &lt;div class="header"&gt;some text that will wrap&lt;/div&gt;
      &lt;div class="header"&gt;test3&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>