CSS实现网页垂直居中的办法（3）－站长资讯网info110.com

最终的版本

现在回到这个问题，我曾经用了一些很复杂的方法去解决，但是现在又一个更简单、稳健的方法，那就是用浮动去代替绝对定位。

我们设定页面上的第一个元素的高度为页面的 50%，然后将这个元素向上拉，所拉的距离等于我们要设定居中的元素的高度的一半。

这里是我们做出的修正：

CSS 代码：

#vertical{
    float:left;
    height:50%;
    margin-top:-198px;/* half vertical height*/
    width:100%;
}

HTML 代码：

<div id="vertical"></div>
<div id="hoz">
<h1>Content goes here</h1>
</div>

你可以看到所展示的效果。

这里很重要的一部分就是我们使用了一个宽度为100%的 float 元素，当然我们要记得为它的下一个元素添加 clear:both; ,否则，一些浏览器将不能理解你的意思。如果这里我们不使用 float，那么文字依然会消失在我们的视线之外。

CSS实现网页垂直居中的办法（3）