用CSS实现内容的垂直居中

在设计页面布局的时候，我们很可能需要到一些内容可以达到垂直居中。如果使用
<table>里面的valign属性，那很容易达到内容的垂直居中。但使用<table>
的缺点就是，你很可能就为了达到某些文本的垂直居中，就能弄一个烦人的表格框架。而现在，Verne为我们带为一个解决方法，纯CSS实现页面的垂直居中。

1.HTML代码

<div id="container">
<div id="position">
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec laoreet egestas mi. Aliquam erat volutpat. Aliquam erat volutpat. Suspendisse potenti. Suspendisse potenti. Vestibulum mi nibh, hendrerit nec, feugiat vitae, feugiat a, nisl.
</div>
</div>
</div>

2.CSS代码

<STYLE type="text/css">
#container { width: 100%; height: 100%; display: table; }
#position { display: table-cell; vertical-align: middle; width: 100%; text-align: center; }
</STYLE>

这串CSS代码，几乎支持所有的浏览器。呃，但是除了IE，所以，需要对IE进行一个小小的Hack.

3.对IE的Hack
<!--[if IE]>
<STYLE type="text/css">
#container { position: relative; }
#position { position: absolute; top: 50%; }
#content { position: relative; top: -50%; }
</STYLE>
<![endif]-->

你可以点击查看Demo或是下载示例。