图片居中的几种方法总结，

图片居中的几种方法总结，

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

html代码

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

css代码

  .con{
	   	width: 400px;
	   	height: 300px;
	   	/*水平方向居中*/
	   	text-align: center;
	   	margin: 50px auto;
	   	border: 1px solid #ddd;
	   }
	   .con img{
	   	/*转换成行内块元素，支持margin-top*/
	   	display: inline-block;
	   	/*需要计算，才能是图片垂直居中*/
	   	margin-top: 50px;
	   }

效果如下

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

2、利用display:table-cell

html代码同上

css代码

.con{
	   	width: 400px;
	   	height: 300px;
	    border: 1px solid #ddd;
	    /*转换表格属性*/
	   	display: table-cell;
	   	/*垂直方向居中*/
	   	vertical-align: middle;
	   	 /*水平方向居中*/
	   	text-align: center;
	   }

效果如下：

总结：这个方法主要是利用了表格属性，比较实用。

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: 400px;
       	height: 300px;
         border: 1px solid #ddd;
         position: relative;
        }
       
      .con img{
       	position: absolute;
       left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
       }

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