图片水平垂直居中的几种方法总结

1、固定图片大小水平垂直居中，图片300*200 如下：

html代码

<div class="con"><img src="images/fengche.png" alt=""></div>

css代码

.con{width: 40%;height: 300px;margin:50px auto;border: 1px solid red;/*子元素是行内块时候 可以通过text-align center 设置水平居中*/text-align: center;}img{width: 200px;height: 200px;/*img不支持行高，不能像文本那样设置行高等于盒子高度，垂直居中*/line-height: 300px;/*margin:100px auto;*/}

效果如下

发现水平方向可以通过text-align center 设置水平居中，但是垂直方法无法居中，怎么办呢。img 属于行内块元素，支持所有元素，利用margin-top让它垂直居中。

.con{width: 40%;height: 300px;margin:50px auto;border: 1px solid red;/*子元素是行内块时候 可以通过text-align center 设置水平居中*/text-align: center;}img{width: 200px;height: 200px;/*img不支持行高，不能像文本那样设置行高等于盒子高度，垂直居中*/line-height: 400px;/*margin:100px auto;*/margin-top: 50px;}

水平方向能不能也靠margin auto实现呢？

.con{width: 40%;height: 300px;margin:50px auto;border: 1px solid red;/*子元素是行内块时候 可以通过text-align center 设置水平居中*//*text-align: center;*/}img{width: 200px;height: 200px;/*img不支持行高，不能像文本那样设置行高等于盒子高度，垂直居中*//*line-height: 300px;*/margin:50px auto;/*margin-top: 50px;*/}

这个时候发现垂直居中了 但是水平没有居中。。。原因暂时想不出来。。。

总结：这种方法比较初级，前提是图片固定大小，根据盒子大小和图片大小计算出margin-top，从而让图片垂直居中。如果不需要水平居中则去掉外部盒子的text-align: center;

2、利用display:table-cell

html代码同上

css代码

.con{width: 40%;height: 300px;/*margin不生效*/margin:50px auto;border: 1px solid #ddd;/*转换表格属性*/display: table-cell;/*垂直方向居中*/vertical-align: middle;/*水平方向居中*/text-align: center;}img{width: 200px;height: 200px;}}

效果如下：

总结：这个方法主要是利用了表格属性，用table-cell搭配vertical-align可以十分简单地完成元素垂直居中。但是margin不生效了。。。

3、利用背景实现居中

html代码

<div class="con"></div>

css

.con{width: 400px;height: 300px;border: 1px solid #ddd;background:url(images/dog.jpg) center center no-repeat;}

效果一样

总结：图片固定不变的地方可以使用。

4、利用定位

<div class="con"><img src="images/dog.jpg"></div>

css

.con{width: 40%;height: 300px;/*margin不生效*/margin:50px auto;border: 1px solid #ddd;position: relative;}img{position: absolute;width: 200px;height: 200px;left: 0;right: 0;top: 0;bottom: 0;margin:auto;//很关键}

其他的方法还有很多，关键是找到适合的方法。