CSS之图片水平垂直居中总结

图片高宽固定1（利用盒子模型进行定位）

<div class="box">
<img src="./101.jpg" />
</div>

.box {
border: 1px solid red;
width: 200px;
height: 200px;
position: relative;
}

.box img {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
}

图片高宽固定2(利用行高等于容器高)

<div class="box">
<img src="./101.jpg"/>
</div>

.box {
border: 1px solid red;
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
}

.box img {
width: 100px;
height: 100px;
vertical-align: middle;
}

父元素高宽已知，图片大小未知

<div class="box">
<img src="./101.jpg" alt="">
</div>

.box {
width: 250px;
height: 250px;
border: 1px solid red;

/*主流浏览器的居中*/
display: table-cell;
vertical-align: middle;
text-align: center;

/* 以下为了兼容IE7及以下，目前多数网站不需要*/
*display: block;
*font-size: 300px; /*约为高度的0.873，200*0.873 约为175*/
*font-family: Arial; /*防止非utf-8引起的hack失效问题，如gbk编码*/
}