<!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;
}