在前端開發中，圖片垂直居中對奇是很常見的，有些是固定高度，有些沒有固定高度，本文分享我用的四種方法，希望對你有所啟發。

以下說的做法暫不考慮IE瀏覽器的兼容性，適用於移動端

以下的做法中假定外層的高度和寬度已經固定。通用HTML和CSS代碼：

<div class="img">
<img src="1.jpg"/>
</div>

.img {
    width:300px;
    height:300px;
    margin:20px auto;
    background:#f00;
}

1.相對定位+margin:auto

利用圖片相對於外層浮動，加上 margin:auto

<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;
}

2.增加一個空白標簽

兼容性較好，支持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
}

3.flexbox

利用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;
}

4.table-cell

利用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
}

圖片水平垂直居中對齊的四種做法