在前端开发制作中，图片垂直居中对齐是很常见的，有些是固定高度，有些没有固定高度，本文分享我用的四种方法，希望对你有所启发。
来源：http://caibaojian.com/img-vertical-middle.html
以下说的做法暂不考虑IE浏览器的兼容性，适用于移动端，对兼容性感兴趣的可以看之前的文章：图片垂直居中对齐的3种方法
以下的做法中假定外层的高度和宽度已经固定。通用HTML和CSS代码：
<div class="img"> <img src="http://dummyimage.com/200x200/f66/"/> </div>
1 .img { 2 width:300px; 3 height:300px; 4 margin:20px auto; 5 background:#00f; 6 }
1.相对定位+margin:auto
利用图片相对于外层浮动，加上margin:auto.
<div class="img img1"> <img src="http://dummyimage.com/200x200/f66/"/> </div>
1 img1 { 2 position:relative; 3 } 4 .img1 img { 5 position:absolute; 6 top:0; 7 bottom:0; 8 left:0; 9 right:0; 10 margin:auto; 11 }
2.flexbox
利用flexbox里面的垂直居中属性：align-items:center(垂直居中)和justify-content:center(水平居中);
<div class="img img2"> <img src="http://dummyimage.com/200x200/f66/"/> </div>
1 .img2 { 2 display:-webkit-box; 3 display:-ms-flexbox; 4 display:flex-box; 5 display:flex; 6 -webkit-box-align:center; 7 -ms-flex-align:center; 8 align-items:center; 9 -webkit-box-pack:center; 10 -ms-flex-pack:center; 11 justify-content:center; 12 text-align:center; 13 }
3.table-cell
利用display:table-cell+图片vertical-align:middle
<div class="img img3"> <span class="icenter"><img src="http://dummyimage.com/200x200/f66/"/></span> </div>
1 .img3 .icenter { 2 display:table-cell; 3 vertical-align:middle; 4 text-align:center; 5 height:300px; 6 width:300px 7 } 8 .img3 img { 9 vertical-align:middle; 10 display:inline-block 11 }
4.增加一个空白标签
兼容性较好，支持IE浏览器
<div class="img img4"> <img src="http://dummyimage.com/200x200/f66/"/> <i class="iblock"></i> </div>
1 .img4 { 2 text-align:center 3 } 4 .img4 img { 5 vertical-align:middle 6 } 7 .img4 .iblock { 8 display:inline-block; 9 height:100%; 10 width:0; 11 vertical-align:middle 12 }
