网页布局 CSS简单实现垂直居中
佚名
最终的版本
现在回到这个问题，我曾经用了一些 很复杂的方法 去解决，但是现在又一个更简单、稳健的方法，那就是用浮动去代替绝对定位。
我们设定页面上的第一个元素的高度为页面的 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，那么文字依然会消失在我们的视线之外。