图片垂直居中的5种css方法

图片垂直居中的css方法

今天我要介绍的是采用css进行图片居中的5个方法。首先确定我们的HTML结构(若不特别说明,下面皆采用该HTML结构)

<div class="vertical-center">
<img src="1.jpg" alt="StarXY">
</div>

1.此方法会在img标签前加上一个inline-block的span标签，并给两个标签都设置vertical-align: middle。 HTML代码更改为：

<div class="vertical-center">
<span></span><img src="1.jpg" alt="StarXY">
</div>

css代码为：

body {
font-family: "Microsoft YaHei";
font-size: 14px;
padding: 0;
margin: 0;
}

.vertical-center {
width: 200px;
height: 200px;
text-align: center;
border: 1px solid #ff4500;
}
/*
使用 .vertical-center:before会有2px的像素差，原因不明
*/
.vertical-center span{
display: inline-block;
width: 0;
height: 100%;
font-size: 0;
vertical-align: middle;
}

.vertical-center img {
display: inline-block;
vertical-align: middle;
}

2.给img元素加上绝对定位，并设置margin负值。

body{
padding: 0;
margin: 0;
}
.vertical-center{
position: relative;
width: 200px;
height: 200px;
border: 1px solid #ff4500;
}
.vertical-center img{
position: absolute;
left: 50%;
top: 50%;
width: 160px;
height: 160px;
margin: -80px 0 0 -80px;
}

3.img元素绝对定位，并设置left, right, top, bottom为0。

body{
padding: 0;
margin: 0;
}
.vertical-center{
position: relative;
width: 200px;
height: 200px;
border: 1px solid #ff4500;
}
.vertical-center img{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}

4.div类型为table-cell，并设置vertical-align: middle

body{
padding: 0;
margin: 0;
}
.vertical-center{
display: table-cell;
width: 200px;
height: 200px;
text-align: center;
vertical-align: middle;
border: 1px solid #ff4500;
}

5.对img使用css3属性tranform: translate(-50%, -50%)

body{
padding: 0;
margin: 0;
}
.vertical-center{
width: 200px;
height: 200px;
border: 1px solid #ff4500;
}
.vertical-center img{
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

最终效果图如下：



以上五种方法，性能各有优劣。第一种和最后一种性能最优，第二三四种因为采用了绝对定位或者table-cell对性能消耗较大，不建议采用。