图片垂直居中的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对性能消耗较大，不建议采用。