<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
</head>
<style type="text/css">
*{padding: 0;margin: 0;}
.box{width: 100%;border: solid 5px red;}
.a{display: inline-block;text-align: center;vertical-align: middle;width: 200px;font-size: 128px;}
.img{vertical-align: middle;}
</style>
<body>
<div class="box">
<a class="a" href=""><img class="img" src="1.png" alt="" /></a>
<a class="a" href=""><img class="img" src="2.png" alt="" /></a>
</div>
</body>
</html>
注：此方法只适用与多图片居中时使用vertical-align是需要参照物来对齐的！
a标签外的父容器不需要设定高度
1.img外的标签需是a标签或span这类inline属性的标签，div标签也可以，但是css代码多些:display:inline; display:inline-block先变成inline属性，再转变成inline-block属性，原因讲起来又是一篇长长的文章，放着。
2.此方法只需要两层标签即可，可谓代码超简洁，但是只适用于多图垂直居中对齐的情况。因为其对齐原理是相邻的图片居中对齐，如果只是一个图片，vertical-align:middle就只有与空格对齐了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
</head>
<style type="text/css">
*{padding: 0;margin: 0;}
.box{width: 200px;height:200px;border: solid 5px red;text-align: center;}
.img1{vertical-align: middle;}
.img2{width: 1px;height: 100%;vertical-align: middle;margin-right: -1px;}
</style>
<body>
<div class="box">
<img class="img1" src="1.png" alt="" /><img class="img2" src="2.png" alt="" />
</div>
</body>
</html>
此方法是利用vertical-align相互作用的原理实现的img2为一张1px*1px的gif透明图片
原理是让img1与img2做相互居中img2的高度为100%也就是父容器的高度它居中也就是正好撑满然后img1与它相互居中自然img1也实现的居中的效果
img2也可以替换成一个span标签给他设置display:inline-block;就可以了