标签：四种方法 ice relative line tab 前端 垂直 http bottom
在前端开发中，图片垂直居中对奇是很常见的，有些是固定高度，有些没有固定高度，本文分享我用的四种方法，希望对你有所启发。
以下说的做法暂不考虑IE浏览器的兼容性，适用于移动端
以下的做法中假定外层的高度和宽度已经固定。通用HTML和CSS代码：
<div class="img">
<img src="1.jpg"/>
</div>
.img { width:300px; height:300px; margin:20px auto; background:#f00; }
<div class="img">
<img src="1.jpg/"/>
</div>
.img { position:relative; } .img img { position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; }
兼容性较好，支持IE浏览器
<div class="img">
<img src="1.jpg/"/>
<i class="oblock"></i>
</div>
.img {
text-align:center
}
.img img {
vertical-align:middle
}
.img .oblock {
display:inline-block;
height:100%;
width:0;
vertical-align:middle
}
利用flexbox里面的垂直居中属性：align-items:center(垂直居中)和justify-content:center(水平居中);
<div class="img">
<img src="1.jpg/"/>
</div>
.img { display:-webkit-box; display:-ms-flexbox; display:flex-box; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; text-align:center; }
利用display:table-cell+图片vertical-align:middle
<div class="img">
<span class="icenter"><img src="1.jpg/"/></span>
</div>
.img .icenter { display:table-cell; vertical-align:middle; text-align:center; height:300px; width:300px } .img img { vertical-align:middle; display:inline-block }
标签：四种方法 ice relative line tab 前端 垂直 http bottom
原文地址：http://www.cnblogs.com/rui1001/p/7593977.html
