CSS 垂直居中五种实现方法

floater 的 margin-bottom 是 content 高度(400px)的一半， -200px。

现在可以看到一下效果：

#centred 的宽度为 80％。这可以市网页随着显示器的大小而变化。一般称作流体布局。设置 min-width 和
max-width 以避免网页过大或者过小。 但是 IE 不支持 min/max-width。显然可以用固定宽度来代替。

因为 #centred 是相对定位的，在它里面我们可以用绝对定位来定位元素。设置 #content 的 overflow:auto;
以避免滚动条的出现。IE 不怎么喜欢 overflow:auto; 除非我们指定高度(不是 top 和 bottom 的定位，也不是 ％)
因此我们给它指定高度。

步骤三
最后要做的就是再添加点样式，让页面好看点。从目录开始吧。

#nav ul {
 list-style:none;
 padding:0; margin:20px 0 0 0; text-indent:0;
}
 
#nav li {
 padding:0; margin:3px;
}
 
#nav li a {
 display:block; background-color:#e8e8e8;
 padding:7px; margin:0;
 text-decoration:none; color:#000;
 border-bottom:1px solid #bbb;
 text-align:right;
}
 
#nav li a::after {
 content:'»'; color:#aaa; font-weight:bold;
 display:inline; float:right;
 margin:0 2px 0 5px;
}
 
#nav li a:hover, #nav li a:focus {
 background:#f8f8f8;
 border-bottom-color:#777;
}
 
#nav li a:hover::after {
 margin:0 0 0 7px; color:#f93;
}
 
#nav li a:active {
 padding:8px 7px 6px 7px;
}

需要注意的是 #centred 的圆角。 CSS3 中，应该有 border-radius 属性来设定圆角的半径(可参考 CSS3之旅: border-radius(圆角) – 糖伴西红柿)。现在的
流行的浏览器都还不支持，除非用 -moz(Molilla Firefox) 或者 -webit(Safari/Webkit) 前缀.

兼容性注意事项
如你所想，IE 是唯一添麻烦的浏览器。
#floater 必须指定宽度，否则在任意版本 IE 中，它都啥也不干
IE 6 中目录被周围太多的空间打断
IE 8 有多余空间(作者遗漏)

更多的想法
利用居中的网页可以做很多有意思的事情。我在重新设计 SWFObject Generator 2.0 (使用 SWFObject2.0 生成代码)使用了这个想法。这里有另外的一个想法。

资料
以下是我参考的一些资料，推荐阅读。

Understanding vertical-align, or “How (Not) To Vertically Center Content”
Vertical centering using CSS
Vertical Centering in CSS

糖伴西红柿说：
水平居中经常用，其实垂直居中也很有用的。平时用的最多的应该是方法五了，算是个小技巧吧。