title: How to scale and center text vertically in a fluid layout? (using CSS)
body: <p>I have a fluid layout consisting of a header and a content area. The header is meant to occupy 10% of the window's height and the content area is expected to occupy the remaining 90%. Text in the entire screen should scale proportionally to the window's height. Also text in the header should be centered vertically. I am able to meet all these requirements except the last one. Anyone know how to do this?</p>
  
  <p>Here's what I have so far: <a href="http://jsfiddle.net/nareshbhatia/h2s4h/" rel="nofollow">http://jsfiddle.net/nareshbhatia/h2s4h/</a></p>
  
  <p>I am using Em units to do relative sizing of the text. I use JavaScript to change the font-size of the <code>body</code> element whenever the window is resized. This approach scales the fonts beautifully for the entire window. Finally, I tried to center the header text vertically by setting the line-height of the header to be the same as its height (i.e. 10%). This usually centers the text vertically (when the height is defined in pixels), but in this case the text does not center vertically. Any ideas on how to fix this?</p>
  
  <p><strong>Edit</strong> The jsFiddle is updated to show the suggested answer.</p>