假设父元素的统一样式如下所示

1
.wrapper {width: 300px; height: 300px; border: 1px solid orange;}

1、:after伪元素+content

1
2
3
.wrapper { text-align: center; font-size: 0;}
.wrapper:after { content: ""; display: inline-block; width: 0; height: 100%; vertical-align: middle; overflow: hidden;}
.wrapper img { vertical-align: middle;}
1
2
3
<div class="wrapper">
<img src="img.png">
</div>

2、display:table-cell

1
2
.wrapper { display: table-cell; vertical-align:middle; text-align: center;}
.wrapper img { vertical-align: middle;}
1
2
3
<div class="wrapper">
<img src="img.png">
</div>

3、透明gif图片

alpha.gif 是一个一像素的透明图片。

1
2
3
.wrapper { text-align: center; font-size: 0;}
.img-show { vertical-align: middle;}
.img-alpha { width: 1px; height: 100%; vertical-align: middle;}
1
2
3
4
<div class="wrapper">
<img class="img-show" src="img.png">
<img class="img-alpha" src="alpha.gif">
</div>

4、 透明gif图片+背景定位

alpha.gif 是一个一像素的透明图片。

1
.wrapper img { display: block; width: 100%; height; 100%; background-repeat: no-repeat; background-position: center;}
1
2
3
<div class="wrapper">
<img src="alpha.gif" style="background-image: url(img.png);">
</div>

注:background-image写style样式,因为CSS不支持动态URL

参考链接:
1、 :after伪类+content内容生成经典应用举例 – 张鑫旭
2、 大小不固定的图片、多行文字的水平垂直居中 – 张鑫旭