如何在动态高度 Div 中垂直居中文本？

动态高度 Div 中的垂直文本对齐

将网站元素定制为用户可调节的浏览器高度时，通常必须确保垂直对齐动态高度 div 内的文本保持居中。如何实现这一点？

考虑以下 HTML 结构：

    <div>
<p>垂直对齐 </p>
<h1>边界 <div> 内的标签无论其高度如何，都采用以下策略：<p><strong>解决方案：</strong> 利用 display 属性将包装器 </p>
<div> 设置为 元素作为表格，允许垂直对齐属性将所包含的元素居中。<p><strong></strong>示例代码：</p>
<p><strong></strong>HTML</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;
}

此方法已在各种浏览器和平台上进行了测试，包括：

已测试系统：

• Windows XP Professional，Service Pack 3
• Windows 7 家庭版，Service Pack 1
• Linux Ubuntu 12.04

已测试浏览器：

• 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（开发者版本 130497 Linux）