<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片居中问题</title>
<style>
*{
margin:0;
padding:0;
}
a{
display:inline-block;
width:250px;
height:250px;
background:blue;
text-align:center;
}
img{
vertical-align:middle;
}
span{
display:inline-block;
width:0;
height:100%;
vertical-align:middle;
}
a:hover{
background:red;
}
</style>
</head>
<body>
<a href="#">
<img src="haha.png"/><span></span>
</a>
<a href="#">
<img src="haha.png"/><span></span>
</a>
<a href="#">
<img src="haha.png"/><span></span>
</a>
<a href="#">
<img src="haha.png"/><span></span>
</a>
<a href="#">
<img src="haha.png"/><span></span>
</a>
</body>
</html>
（1）要居中元素必须是inline-block元素
（2）给要居中元素的父元素加上text-align：center（左右居中）
（3）给当前元素加上同级元素span，注意不能加回车和换行（因为行内块元素受空格影响）
（4）给当前元素加上vertical-align：middle
（5）span{
display:inline-block;
width:0;
height:100%;
vertical-align:middle;
}