转自：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>
代码很简单，就一个class="wall"的div标签，一个a标签，一个class=“img404”的img标签。
接下来就是写css了，先让class="wall"的div的宽和高都为100%，以填充整个页面，CSS如下：
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，让class="wall"的div在IE6里也能高度为100%。如果想验证一下class="wall"的div现在是否已经填充了整个页面，不妨在.wall里面设一个背景色就可以知道了，这里我就不做实验了。
目前整页的代码如下：
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来实现垂直居中了，因为class="wall"的div填充了整个页面，所以只要让图片在class="wall"的div里面垂直居中就达到目的了。以前总是以为vertical-align与text-align是同样的道理，一个是垂直居中，一个是水平居中，只要给class="wall"的div加上一个vertical-align:middle就能让图片垂直居中，结果一点效果也没有。事实上vertical-align与text-align完全不一样，给class="wall"的div加上一个text-align:center的话，毫无疑问是可以让里面的img水平居中，但vertical-align却不能这样子用。
先看一下W3C上对vertical-align的定义：vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
必须承认这句话我看了很久才看懂说的是神马意思，我的理解是它有两种用法：
第一种用法，先看后面一句“在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。”这很容易理解，如果给一个表格的td加一个vertical-align:middle的样式，表格里面的内容会垂直居中，同样的如果给一个vertical-align:bottom就会底部对齐，如果给一个vertical-align:top就会顶部对齐。
第二种用法，看前页一句“该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。”专业的语言我不会说的，可以打个比喻：假设有两个行内元素a和b，a和b都是img，当a加了一个vertical-align:middle样式之后，b的底部（基线）就会对齐a的中间位置，如下图：
如果a和b都加了一个vertical-align:middle样式，那么就互相对齐了对方的中间位置，也就是它们在垂直方向上的中线对齐了，如下图：
说到这里，思路就清晰了（PS：理应知道vertical-align可以设middle,top,bottom等等，甚至可以设置具体的值或百分比，如果想知道会有怎样的效果，可以自己实验一下，这里就不多说了。）。
接下来回到这篇文章的主题，现在我要让class="img404"的img在class="wall"的div里面垂直居中，我可以在div里面加一个span空标签，把它的高度设为100%，再给它一个vertical-align:middle样式，同样地给img一个vertical-align:middle样式，那么img就可以在div里面垂直居中了。如图：
按照这个思路，完整的页面代码就出来了：
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>
效果如下：
相关推荐
主要介绍了利用vertical-align:middle实现行内元素的水平垂直居中对齐，实现样式如下，需要朋友不要错过
vertical-align:middle; height:50px;}</style> html结构：测试 （注意：测试后面没有其他文字或元素）现象：div的下边框消失，在ff下没事，且文字不能居中（如图）。 html结构2测试测试文字 –在后面再加上...
将input和img放同一行，img标签总是比input高出一个头，...后来无意中发现同时给input和img添加vertical-align:middle就行： 复制代码代码如下:input,img{vertical-align:middle;} 这样代码就会规规矩矩地水平对齐了。
CSS实例:vertical-align属性让网页层居中. vertical-align属性使网页层居中 网页源代码如下： <html><head><style>body{TEXT-ALIGN: center;}#center{MARGIN-RIGHT: auto;MARGIN-LEFT: auto;...
水平居中 若为行内元素，对其父...另由可通过对表格元素td使用vertical-align:middle可对其内的元素进行垂直居中可知，通过对父元素使用display:table-cell;vertical-align:middle;也可实现对元素的垂直居中，且该种方
1、vertical-align:middle的时候，是该元素的中心对齐周围元素的中心。 2、这里“中心”的定义是：图片当然就是height的一半的位置，而文字应该是基于baseline往上移动0.5ex，亦即小写字母“x”的正中心。但是很多...
1.利用table-cell实现垂直居中 [站外图片上传中……(5)] div{ width: 500px; height: 500px; background: #ccc; } .box1{ text-align:center; display: table-cell; vertical-align: middle; /* font-...
其实很简单，只需要在尾部增加一个<i></i> ，然后把需要垂直居中的元素设置display:inline-block; vertical-align:middle; 看看效果图 实例代码 复制代码代码如下:<style>*{ margin:0 ; padding:0;}.bg{ ...
jsp中让图片在div中居中显示，如上图 例子： 代码如下: //CSS文件 <style type=”text/css”> #bj{ width:200px; height:200px; border:3px solid red; text-align:center; vertical-align:middle; display:...
一、前言vertical-align对于初学者最常见的使用是在表格中了，尤其是使用dreamweaver的童学，常见的数top,middle,bottom了,其他的应该很少用到，但是vertical-align的属性之多，所以情况也略显复杂，下面先来看看...
后来发现同时给input和img添加vertical-align:middle就行： 在写css时，使得input和img在同一行居中对齐的方法： 复制代码代码如下:img{vertical-align:middle;} input{width:宽度;height:高度;line-height:与高度...
利用vertical-align：middle进行垂直方向上的居中对齐，此方法需要满足的条件： 设置父元素的行高line-height等于父元素height的高度 子元素必须是行内块级元素display:inline-block; 子元素设置vertical-align：...
行高line-height实现单行文本垂直居中 以前一直认为单行文本垂直居中要将高度和行高设置成相同的...设置vertical-align:middle实现垂直居中 【1】设置父元素的display为table-cell 通过为table-cell元素设置vertical-al
vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行 powered by 25175.net 2. margin加倍的问题 设置为float的div在ie下设置的...
vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行。 2. margin加倍的问题 设置为float的div在ie下设置的margin会加倍。这是一个...
or vertical-align: middle （测试发现使用vertical-align时，水平方向无法居中，text-align可以） } <div>test 2、margin加倍的问题： ie6下，div设置为float时，左（右）margin会加倍。 解决方法：在这个...
我记得当时给了个答案是，先用JS获取浏览器窗口高度，然后给body设置line-height为窗口高度并设置text-align:center， 接着再设置该元素display:inline-block和vertical-align:middle。唉，现在想想自己都觉得累。 ...
ie7和ie6能识别vertical-align:middle; 如果盒模型中间只有几段文字的话，设置line-height就可以实现居中显示了！ 如果要实现盒模型中的div居中，可以参考以下代码： CSS Code复制内容到剪贴板 div#wrap { ...
*/ vertical-align: middle; } table { margin-left: auto; margin-right: auto; } html代码： 复制代码代码如下: ”dlgReply”> <table> <tr> <td> <label> 电话： </label> </td> <td> <input type=”text” ...