方法一：vertical-align: middle;
先設置一個div包含一個a標簽和img標簽
<div>
<a href="http://www.lxweimin.com/u/2f326b555fe5"></a>
<img src="image404.png" alt="">
</div>
讓div在頁面居中，此處用了用絕對定位position:absolute為了解決瀏覽器兼容問題，比如safari里面就會出現邊緣間距空白
<style type="text/css">
div{
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
text-align:center;
}
div img{
border:0;
width:700px;
}
</style>
此處div加上一個vertical-align:middle能讓圖片垂直居中，結果一點效果也沒有。但是加上text-align:center的話，可以讓里面的img水平居中，但vertical-align卻不能這樣子用。
我的第一種做法是：可以在div里面加一個span空標簽，把它的高度設為100%，再給它一個vertical-align:middle樣式，同樣地給img一個vertical-align:middle樣式，那么img就可以在div里面垂直居中了。
<head>
<meta charset="UTF-8">
<title>換膚效果</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100%;
height: 100px;
background: yellow;
text-align: center;
vertical-align: middle;
}
div img{
height: 80px;
vertical-align: middle;
}
body{
background: url("images/hanguo1.jpg");
}
div span{
vertical-align: middle;
display: inline-block;
height: 100px;
}
</style>
</head>
<body>
<div>
<span></span>
<img src="images/gufen1.jpg" alt="">
<img src="images/gufen4_400x400.jpg" alt="">
<img src="images/gufen5.jpg" alt="">
<img src="images/gufen3.jpg" alt="">
<img src="images/gufen2.jpg" alt="">
<img src="images/hanguo2.jpg" alt="">
<img src="images/hanguo3.jpg" alt="">
<img src="images/純陽.png" alt="">
<img src="images/hanguo4.jpg" alt="">
<img src="images/蒼云.png" alt="">
</div>
</body>
這里我設置頁面背景為圖片平鋪效果，效果如下：
圖片.png
方法二：vertical-align：middle
vertical-align屬性只對行內元素有效，對塊內元素無效！將display屬性設置為table-cell，將塊元素轉化為單元格，然后加上vertical-align：middle，也可以實現這樣的效果。
方法三：line-height
設置行高line-height,但是要注意，與父元素的高度一致，要與div的高度一致，但是小圖片會被拉伸，大圖片設置行高不會使的圖片變小，大圖片設置img的高度即可。
方法四：子絕父相
未知寬高的圖片可以這樣寫，但是下面代碼只能設置單張圖片，多張圖片還可以做變動，比如通過浮動來定位其他圖片等
div{
width: 100%;
height: 100px;
background: yellow;
position: relative;
}
div img{
height: 80px;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
已知圖片寬高的：通過計算可以獲得，可以設置多張圖片
div{
width: 500px;
height: 500px;
background: yellow;
position: relative;
}
div img{
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-left:-100px;
margin-top: -100px;
}
還有其他的方式，這里僅僅是用了css的一些方法
