用CSS实现内容的垂直居中

十二月 15, 2009 by zeze · Leave a Comment

在使用valign属性能够把内容垂直中心，使用表格的一个好处是方便。不幸的是，用CSS实现同样的效果不是那么方便。
一下内容中，我们使用CSS垂直中心内容。

HTML

需要三个div。下面是一个例子我们如何设置的div。

<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>

在＃container div是用作为中心的内容主要参照点。换言之，内容将被垂直居中反对＃container div的高度。

在＃position分区用于自然，位置的内容。

最后，＃content 分区是用来包住的实际内容，我们正在努力的中心。这组也被用来纠正的Internet Explorer用户的内容（您将在后面看到定位）。

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>

一下是支持IE样式

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

下载样本

原文：用CSS实现内容的垂直居中

来源：Vdot Media