css图片居中的一些方法

前端很多时候都会遇到一个需求，水平垂直居中显示，这次我就拿图片的上下左右居中做一个简单的几个例子。

其实前端做一个CSS图片居中有很多的方法，没有高低不能用的情况，只要能满足你的项目随便哪一个实现就可以。

一、单纯的水平居中

1、水平居中

给图片的父级加text-align:center;来水平居中，在这种情况下img不可以是块级元素。

代码：

<div class="div1"><img src="images/2.png" /></div>
<style>
    .div1{ border:1px solid #999999; height:200px; width:300px; margin:0 auto; text-align:center;}
</style>

2、水平居中

给图片margin:0 auto;来居中，img必须为块级元素

代码：

<div class="div2"><img src="images/2.png" /></div>
<style>
    .div2{ border:1px solid #999999; height:200px; width:300px; margin:0 auto;}
    .div2 img{ display:block; margin:0 auto;}
</style>

二、水平垂直居中

1、水平垂直居中

使用了line-height和vertical-align: middle;来图片的居中，IE7及以下不支持。

代码：

<div class="div3"><img src="images/2.png" /></div>
<style>
    .div3{ border:1px solid #999999; height:200px; width:300px; margin:0 auto; text-align:center; line-height:200px;}
    .div3 img{display: inline-block; vertical-align: middle;}
</style>

2、水平垂直居中

display: table-cell;属性来居中，我比较推荐这样的做法，IE7及以下不支持。

代码：

<div class="div4"><span><img src="images/2.png" /></span></div>
<style>
    .div4{ border:1px solid #999999; height:200px; width:300px; margin:0 auto; text-align:center; display: table;}
    .div4 span{display: table-cell; vertical-align: middle;}
</style>

3、水平垂直居中

定位来CSS水平垂直居中，IE7及以上都支持，兼容性比较好，但是不建议这么去做。

代码：

<div class="div5"><img src="images/2.png" /></div>
<style>
    .div5{ position:relative; border:1px solid #999999; height:200px; width:300px; margin:0 auto;}
    .div5 img{ position:absolute; top:50%; left:50%; margin:-50px 0 0 -100px;}
</style>

4、水平垂直居中

table来css图片居中，只要给table一个高度他就自动的上下左右居中了，兼容性比较好。

代码：

<table class="div6">
    <tr>
        <td><img src="images/2.png" /></td>
    </tr>
</table>
<style>
    .div6{border:1px solid #999999; height:200px; width:300px; margin:0 auto; text-align:center;}
</style>

5、水平垂直居中

flex目前来说只有最新浏览器才会支持，现在在移动端使用的比较多，如果不想支持低版本的浏览器还是可以的，这个肯定是以后的趋向。

代码里面注释的为标准写法，为了多兼容我这边写了很多的带前缀的写法。

代码：

<div class="div7">
    <div class="cell">
        <div><img src="images/2.png" /></div>
    </div>
</div>
<style>
.div7 {
    border: 1px solid #999999; height: 200px; width: 300px; margin: 0 auto; text-align: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
/*
.div7 {
    border:1px solid #999999;
    height:200px;
    width:300px;
    margin:0 auto;
    text-align:center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    justify-content: center;
    align-items: center
}
*/
</style>

6、水平垂直居中

利用了padding/margin来居中，给img上边距的方法去居中，这个的好处是所有浏览器（IE>6）都能支持，可以放心使用。

代码：

<div class="div8"><img src="images/2.png" /></div>
<style>
    .div8{ border:1px solid #999999; height:200px; width:300px; margin:0 auto; text-align:center;}
    .div8 img{ margin-top:50px;}
</style>

好了，除了这些还有很多的方法也能实现CSS图片居中，看客们有什么其他想法不妨留言哦。