方法一：vertical-align: middle;
先設(shè)置一個(gè)div包含一個(gè)a標(biāo)簽和img標(biāo)簽
<div>
<a href="http://www.itdecent.cn/u/2f326b555fe5"></a>
<img src="image404.png" alt="">
</div>
讓div在頁面居中，此處用了用絕對(duì)定位position:absolute為了解決瀏覽器兼容問題，比如safari里面就會(huì)出現(xiàn)邊緣間距空白
<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加上一個(gè)vertical-align:middle能讓圖片垂直居中，結(jié)果一點(diǎn)效果也沒有。但是加上text-align:center的話，可以讓里面的img水平居中，但vertical-align卻不能這樣子用。
我的第一種做法是：可以在div里面加一個(gè)span空標(biāo)簽，把它的高度設(shè)為100%，再給它一個(gè)vertical-align:middle樣式，同樣地給img一個(gè)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>
這里我設(shè)置頁面背景為圖片平鋪效果，效果如下：
方法二：vertical-align：middle
vertical-align屬性只對(duì)行內(nèi)元素有效，對(duì)塊內(nèi)元素?zé)o效！將display屬性設(shè)置為table-cell，將塊元素轉(zhuǎn)化為單元格，然后加上vertical-align：middle，也可以實(shí)現(xiàn)這樣的效果。
方法三：line-height
設(shè)置行高line-height,但是要注意，與父元素的高度一致，要與div的高度一致，但是小圖片會(huì)被拉伸，大圖片設(shè)置行高不會(huì)使的圖片變小，大圖片設(shè)置img的高度即可。
方法四：子絕父相
未知寬高的圖片可以這樣寫，但是下面代碼只能設(shè)置單張圖片，多張圖片還可以做變動(dòng)，比如通過浮動(dòng)來定位其他圖片等
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;
}
已知圖片寬高的：通過計(jì)算可以獲得，可以設(shè)置多張圖片
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的一些方法
