CSS图片居中

综述

  在前端开发中，居中是一个比较常见的问题。通常的居中指的是div块居中，div块居中，在前面我已经有一篇博客谈到了一些。这里主要总结一下图片的居中，居中一般分为水平居中和水平垂直居中。图片水平居中的方法有两种，一是使用margin: 0 auto;，二是使用text-align: center;。水平垂直居中的方案有很多，主要有flex、table、行高、以及张鑫旭推荐的两种方法。

水平居中

  提到的两种方法都很简单，就直接贴代码，不再赘述了。

margin

.img-box {
    text-align: center;
}
.img-box img {
    margin: 0 auto;
}

text-align

.img-box {
    text-align: center;
}
.img-box img {
    display: inline-block;
}

水平垂直居中

flex

  相对来说，flex大法是最简单的一种，优点嘛，代码简单不需多余标签同时也好理解，但是缺点嘛…pc只支持到ie10，移动端基本没什么问题，所以如果在不兼容到ie10以下的pc或是移动端开发，flex大法，嗯~真香。

.img-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

table

  这种方法主要利用table的垂直居中属性，我们这里使用display: table属性来模拟table的，当然ie6/7是不支持这个属性的，所以我们如果要兼容ie6/7的话要单独做处理。

.img-box {
    display: table;
}
.img-box span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.img-box img {
    display: inline-block;
}

  这种做法呢，会多添加一个无用的标签，将span作为表格td使span水平垂直居中，在用前面提到的text-align方法使图片水平居中就ok了。缺点使会添加一个无用标签以及使用display: table;可能会影响布局。

行高

  如果在已知高度的情况下，使用行高的方式可能是最好的方法了，不会有兼容性问题，但前提是必须已知父元素高度。

.img-box {
    height: 400px;
    line-height: 400px;
    text-align: center;
}
.img-box img {
    display: inline-block;
}

透明图片+背景定位

  这是张鑫旭在博客中写到一种方法，也是比较好的一种方法，也好维护，但是缺点嘛，需要我们准备一张透明的gif图作为背景，这里只是提一下这种方法，个人并不是很推荐。

<img src="../image/pixel.gif" style="background-image:url(mm1.jpg);" />
img {
    background-position: center;
}

最后

  只是谈到了几种常见的图片居中方法，张鑫旭博客中还有一个透明图片拉伸对齐水平垂直居中的方法。也是最近在读css世界这本书，觉得自己css确实只处于一个入门的水平，希望读完这本书有一定的提升。

  对于图片居中的方法，如果是移动端开发或者不考虑老版本的情况下，用flex就完事儿了。但更多的还是要兼容一下的，所以，在已知高度的情况下使用行高的方法去做，如果还要兼容ie6/7可以去看看淘宝团队是如何使用table方法去做的。张鑫旭的博客中也有提到。最后附上链接：透明图片拉伸对齐实现垂直居中显示