注意！以下方法并不能兼容IE，万恶的IE，想别的办法吧。要么专门写针对IE的CSS，要么就直接放弃IE。
单行文本垂直居中
单行文本的垂直居中很简单，只要设置了height和line-height就可以了，如下所示：
1
2
3
4
| div{
height: 40px;
line-height: 40px;
}
|
多行文本垂直居中
如果文字不确定是几行，可能是一行，也可能是多行。
这个时候肯定不能按照单行文本那样设置了。
比如有如下文字：
1
2
3
4
5
| <div>
<p>这是第一行文字</p>
<p>这是第二行文字，下面还有</p>
<p>下面不一定有文字，也不一定没有文字</p>
</div>
|
需要以下CSS代码：
1
2
3
4
5
6
| div{
height: 300px;
vertical-align: middle;
display: table-cell;
font-size: 18px;
}
|
主要是需要设置display: table-cell;和vertical-align: middle;，即可实现多行文本在高度为300px的div内垂直居中。
图片垂直居中
图片垂直居中的办法和多行文字也是不一样的，我亲自测试过，不行。
我不知道是不是兼容性的问题，反正最终我没有设置成功。
最终在网上找到这么一段代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| div{
height: 95px;
text-align: center;
display: -webkit-box;
-webkit-box-align: center;
-webkit-box-pack: center;
display: -moz-box;
-moz-box-align: center;
-moz-box-pack: center;
display: -o-box;
-o-box-align: center;
-o-box-pack: center;
display: -ms-box;
-ms-box-align: center;
-ms-box-pack: center;
display: box;
box-align: center;
box-pack: center;
}
|
这样div包含的img图片，就可以垂直居中了。