css实现内容的垂直居中...
时间：2010-08-19 来源：liqi___123
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Vdot Media - Demo - Vertically center content with CSS</TITLE>
<STYLE type="text/css">
body { font-family: "Georgia"; color: #000000; font-size: 1.0em; padding: 20px; margin: 0px; }
p { margin: 0 0 15px; }
#container { width: 100%; display: table; }
#position { display: table-cell; vertical-align: middle; }
#content { }
</STYLE>
<!--[if IE]>
<STYLE type="text/css">
#container { position: relative; }
#position { position: absolute; top: 50%; }
#content { position: relative; top: -50%; }
</STYLE>
<![endif]-->
</HEAD>
<BODY>
<div id="container">
<div id="position">
<div id="content">
<h1>Vertically center content with CSS</h1>
<p>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. 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.</p>
</div>
</div>
</div>
</BODY>
</HTML>
相关阅读 更多 +
