1. 幽灵杠杆法(推荐)

我最早是在中国的网站上看到的,这种方法看似比较简单,实际上还是很有内涵的。简单的说是就是通过添加一个有高度的隐形元素来撑高整个 DIV。深入一些,这里用一个 inline-block 就解决了兼容问题了。这是我目前看到的最简单的,并且又能实现兼容的方案。

<style>
 .wrap {
    height:100px; 
    border:solid 1px #999;
 }    
 .lever {
    vertical-align:middle; 
    display:inline-block; /*IE7+ 必须*/
    height:100%; 
    width:0px;  
    background-color: red;
 }    
 .textSpan {
    vertical-align:middle;
 }
</style>

原理分析:

a) 基本原理

通过前面 .lever 的 100% 高度(height: 100%)的中心线的调整(vertical-align:middle)来实现整个 div 的布局上下居中。

b) 兼容处理

在 IE7+ 的浏览器中,如果 span 里面没有内容,默认下的 display: inline 是不管高宽设置的。当然,你可以给它一个 padding 来设置这个高度,这时候浏览器会以 1em (Chrome 浏览器默认下是 1em 高度大概是 16px) 高度去计算。这显然无法达到我们的目的,所以要让他可以设置 100% 高度的话,就要添加了一个 display: inline-block。

c) 细微事项 默认下 vertical-align 的值是 baseline,不过 IE7 中是没有 baseline 的所以就变成了 bottom,所以 IE7+ 和 IE7/IE7- 会有一些细微的不一样的地方。

IE7+ Baseline

IE7+ 的效果

IE7/IE7- Bottom

IE7/IE7- 的效果

不过这些都无法阻止我们上下居中了,因为他们的 middle 都是相同的:

(IE7) = (IE7+.A) + (IE7+.B) (IE7)/2 = (IE7+.A)/2 + (IE7+.B)/2

看到有一些人用 <img> 来代替 <span> 的写法,其实这个是不符合语义的,应该用 span 或者 div 去处理显示布局的问题。

国外的 CSS-Tricks 上也分享了类似的编写方式,叫做 Ghost,通过 :before 选择器完成,不过由于 IE7 是不支持 :before 选择器的,有对旧浏览器考量的同学(特别是为某些非盈利机构服务的),就要慎重选择了。

2. Table 模拟法

这个也是非兼容性方案,IE7 以下也都不支持该方法,不过对于 IE7+ 的浏览器倒是很方便,习惯 Table 布局的长辈们应该会喜欢这种简单方便的处理方式,代码如下:

CSS:

<div class="something-semantic">
   <div class="something-else-semantic">
       Unknown stuff to be centered.
   </div>
</div>

HTML:

.something-semantic {
  display: table;
  width: 100%;
}
.something-else-semantic {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

3. 计算法

通过 position 设置 absolute 的方式来处理,也是可以实现兼容多个浏览器,不过... 要对每个元素进行计算高度,手动设置,这种方式还是比较费工夫的。

<!DOCTYPE html>
<head>
<style>
body{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
}
div{
    position:absolute;
    top:50%;
    left:50%;

    /*宽和高都要固定*/
    width:500px;
    height:18px;

    /*宽高反向位移 50%*/
    margin-top:-9px;
    margin-left: -250px;
    background-color: #ecf;
}
</style>
</head>
<body>
    <div>TEST</div>
</body>

类似的还有 phrogz 的夹层计算,更加复杂一些,不过其实原理也是通过计算 margin 来实现,是比较多人提起到的:

1) http://www.blueidea.com/tech/web/2006/3231.asp
2) http://www.andy-howard.com/verticalAndHorizontalAlignment/index.html

4. line-height

这个只能处理单行的上下居中,多行就难看了。

5. CSS3 处理法

杠杆法或者 Table 法给人的感觉像是作弊,CSS3 的写法感觉会更正规一些。CSS3 Transform 是比较潮的写法,代码比较简单,轻松搞定居中问题,当然兼容性上嘛,也是存在比较多的问题的(我觉得对照表还是偏心非 IE 浏览器的,比如 IE 浏览器列出好几个版本,并且都是过时的版本,而非 IE 浏览器往往都是最新版本;当然另外一方面也是因为 IE 浏览器仍然占据浏览器市场较大比例的原因)。

CSS3 transform 兼容表

其原理其实是和 IE7 兼容处理是一样的道理的,先通过 top: 50% 位居中线,然后调整内部的 Element 上移50%,代码如下:

<style>
.text p {
  position: relative;
  top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.text {
    height: 100px;
    background-color: #396;
}
</style>
<div class="text">
  <p>I'm vertically aligned! Hi ho Silver, away!</p>
</div>

参考资料:
1. http://davidwalsh.name/css-vertical-center
2. http://www.vanseodesign.com/css/vertical-centering
3. http://www.vertical-align.com <- 还有人专门为这个问题搭建了网站?!
4. http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css
5. http://www.codesky.net/article/201109/169418.html