利用vertical-align:middle实现在整个页面居中
转自：http://www.cnblogs.com/xueming/archive/2012/03/21/VerticalAlign.html
如果想让一个div或一张图片相对于整个页面居中，用vertical-align:middle可以很简单地解决。
就以一个404页面为例，看如何让一张图片相对于整个页面居中，如下图：
这是一个404页面，里面就只有一张图片，点击图片可以回到首页，而且这个图片是相对于整个页面居中的，无论是水平还是垂直（PS：这可算是我做404页面最为习惯的一种懒人做法了，越简单越好，要想好看的话，直接用photoshop做一张好看一点的图片就好了～）。
?
接下来看一下它的html代码:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <title>404页面</title>
6 </head>
7 <body>
8 <div class="wall">
9 <a href="index.html"><img class="img404" src="images/404.jpg" alt="404页面" /></a>
10 </div>
11 </body>
12 </html>
代码很简单，就一个style="margin: 5px 0px; padding: 5px; background-color: #f5f5f5; border: 1px solid #cccccc; overflow: auto; font-family: 'Courier New' !important; font-size: 12px !important;">
1 <style type="text/css">
2 body{ margin:0; background:#333; _height:100%;}
3 .wall{ width:100%; height:100%; position:absolute; left:0; top:0; text-align:center;}
4 .img404{ border:0;width:700px;}
5 </style>
以上CSS里面值得一说的恐怕就是为什么要用绝对定位（position:absolute）以及_height:100%这个样式了；我试了很多方法，结果我只能用绝对定位才能让它的height:100%生效，当然固定定位（position:fixed）也是可以的，可是IE6不支持；_height:100%是为了兼容IE6，让style="margin: 5px 0px; padding: 5px; background-color: #f5f5f5; border: 1px solid #cccccc; overflow: auto; font-family: 'Courier New' !important; font-size: 12px !important;">
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <title>404页面</title>
6 <style type="text/css">
7 body{ margin:0; background:#333; _height:100%;}
8 .wall{ width:100%; height:100%; position:absolute; left:0; top:0; text-align:center;}
9 .img404{ border:0; width:700px;}
10 </style>
11 </head>
12 <body>
13 <div class="wall">
14 <a href="index.html"><img class="img404" src="images/404.jpg" alt="404页面" /></a>
15 </div>
16 </body>
17 </html>
效果如下：
?
接下来就利用vertical-align:middle来实现垂直居中了，因为style="margin: 0px; padding: 0px;" alt="利用vertical-align:middle实现时整个页面居中">
如果a和b都加了一个vertical-align:middle样式，那么就互相对齐了对方的中间位置，也就是它们在垂直方向上的中线对齐了，如下图：
说到这里，思路就清晰了（PS：理应知道vertical-align可以设middle,top,bottom等等，甚至可以设置具体的值或百分比，如果想知道会有怎样的效果，可以自己实验一下，这里就不多说了。）。
接下来回到这篇文章的主题，现在我要让style="margin: 0px; padding: 0px;" alt="利用vertical-align:middle实现时整个页面居中">
按照这个思路，完整的页面代码就出来了：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <title>404页面</title>
6 <style type="text/css">
7 body{ margin:0; background:#333; _height:100%;}
8 .wall{ width:100%; height:100%; position:absolute; left:0; top:0; text-align:center; font-size:0;}
9 .img404{ border:0; width:700px; vertical-align:middle;}
10 .verticalAlign{ vertical-align:middle; display:inline-block; height:100%; width:1px; margin-left:-1px;}
11 </style>
12 </head>
13 <body>
14 <div class="wall">
15 <span class="verticalAlign"></span>
16 <a href="index.html"><img class="img404" src="images/404.jpg" alt="404页面" /></a>
17 </div>
18 </body>
19 </html>
以上的CSS里面值得一提的是.verticalAlign，加一个display:inline-block是为了触发它的layout，以让本来没有layout的span可以设置宽和高，margin-left:-1px是为了让span左移一个像素，而令img在水平方向上回到正中位置；另外.wall里面的font-size:0正如我上一篇文章所说的是为了消除代码换行所造成的空隙。
最终效果如下：
（PS：以上仅是个人理解，如有不同意见，或以上说法有错漏，欢迎指出。）
?
同样的原理可以实现文字居中，完整代码如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <title>无标题页</title>
6 <style type="text/css">
7 .wrap{ width:1000px; height:100px; border:solid 1px #999; margin:0 auto; text-align:center;}
8 .verticalAlign{ vertical-align:middle; display:inline-block; height:100%; width:1px; margin-left:-1px;}
9 .textSpan{vertical-align:middle;}
10 </style>
11 </head>
12 <body>
13 <div class="wrap">
14 <span class="verticalAlign"></span>
15 <span class="textSpan">文字居中</span>
16 </div>
17 </body>
18 </html>
效果如下：
