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

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

• 此方法受限于图片的高宽，必须为已知的。
• html

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

• css样式

.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(利用行高等于容器高)

• html

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

• css样式

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

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

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

• 图片的高宽不能超过父元素的高宽，否则不能达到预期效果
• html

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

• css样式

.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编码*/
        }