title: Center text in fixed height div
body: <p>I want to center some text in a fixed height div.</p>
  
  <p>I've made the following <a href="http://jsfiddle.net/wzNp3/" rel="nofollow">fiddle</a></p>
  
  <pre><code>&lt;div style="height:180px;border:1px solid black;vertical-align:middle;"&gt;
       &lt;h1 style="vertical-align:middle;"&gt;Contact&lt;/h1&gt; 
  &lt;/div&gt;
  
  &lt;div style="height:180px;border:1px solid black;vertical-align:middle;"&gt;
      &lt;h2&gt;Welcome to the&lt;/h2&gt;
      &lt;h1&gt;AAA&lt;/h1&gt;
      &lt;h4&gt;system&lt;/h4&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've tried various options of the vertical-align:middle applying it to the different elements but it doesn't seem to work.</p>
  
  <p>I did see other questions where the line-height was set to the same height as the font-size but in the second example I have multiple lines of text at different heights.</p>
  
  <p>Is there a good way to do this?</p>