How to Vertically Center Text in Dynamically Height Divs?

Vertical Text Alignment in Dynamically Height Divs

When tailoring website elements to user-adjustable browser heights, it's often essential to ensure the vertical alignment of text within dynamic height divs remains centered. How can this be achieved?

Consider the following HTML structure:

    <div>
<p>To vertically align the </p>
<h1> tag within the bounding <div> regardless of its height, employ the following strategy:<p><strong>Solution:</strong> Leverage the display property to set the wrapper </p>
<div> element as a table, allowing the vertical-align property to center the contained element.<p><strong>Example Code:</strong></p>
<p><strong>HTML</strong></p>
<pre class="brush:php;toolbar:false">
    <div>
        <h1 id="Text">Text</h1>
    </div>

CSS

body {width: 100%; height: 100%;}   /* for visual demonstration of div height...*/

div {
    position:absolute; height:100%; width:100%;
    display: table;
}
h1 {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
}

This approach has been tested on various browsers and platforms, including:

Tested Systems:

• Windows XP Professional, Service Pack 3
• Windows 7 Home Edition, Service Pack 1
• Linux Ubuntu 12.04

Tested Browsers:

• Internet Explorer 8.0.6001.18702, 9.0.8112.164211C
• Opera 11.62
• Firefox 3.6.16, 12.0
• Safari 5.1.2, 5.1.4
• Google Chrome 18.0.1025.168 m
• Chromium 18.0.1025.151 (Developer Build 130497 Linux)