前几天在做腾讯微博的微卖场的时候，遇到需要做图片居中的需求。也就是说，商品列表中的图片需要居中显示。因为图片是卖家自己把商品图片链接过来，商品图片的大小没有做限制和过滤。所以我们需要做的是，让图片在容器当中水平居中、垂直居中、图片自适应容器大小。图片原图大小和在容器中显示的大小有这样的关系：

假设容器大小为200像素*200像素，图片的宽为x 像素，高为y 像素，则：

当x<=200,y<=200时，图片位于容器中的中间，即水平居中和垂直居中，显示在容器的图片大小为：宽=x，高=y ；

当x>200,y<=200时，显示在容器中的图片大小为：宽=200，高=200y/x ；

当x<=200,y>200时，显示在容器中的图片大小为：宽=200x/y，高=200 ；

当x>200,y>200，且x>y，显示在容器中的图片大小为：宽=200，高=200y/x ；

当x>200,y>200，且x<y，显示在容器中的图片大小为：宽=200x/y，高=200；

当x>200,y>200，且x=y，显示在容器中的图片大小为：宽=200，高=200 ；

为了更好地看到效果，先把图片的原图展示出来，以便和它在列表容器当中做对比。

x<=200,y<=200的图片：

x>200,y<=200的图片：

x<=200,y>200的图片：

x>200,y>200，且x=y的图片：

图片自适应居中适用的场景有商品列表、相册、搜索图片结果列表等。如何使用静态的方法实现这样的效果呢？看了网上的一些方法，加上自己的一些说明，做了几个demo，供大家参考。

使用透明图片，在该图片上设置背景图。

这种方法适用于小图片，即商品图都比容器小，不需要缩放，加载状态图片可以使用这个方法。这个方法的局限性在于，商品图片需要在服务器端过滤，或者先等比例缩小，再在浏览器端显示。

<div class="wrap_1"><a href=""><img style="background-image:url(100_100.jpg)" src="wrap_loading.png" alt=""  width="200" height="200"></a></div>

        /* 图片的背景图方式 */		.wrap_1 { width:200px; height:200px; border:1px solid red; }		.wrap_1 img { display:block; background-repeat:no-repeat; background-position:center; }        

查看demo

设置display为table-cell

在img外设置两层div，最外层div的样式设置为display:table-cell。因为IE6、7中对table-cell不支持，所以针对IE6、7，设置了position来实现居中。在IE8中，如果图片本身的宽比容器的宽大，则容器宽度会被撑开，这里使用针对IE8的width为200px处理。

<div class="wrap_2_outer"><div class="wrap_2_inner"><a href=""><img src="100_100.jpg" alt="" ></a></div></div>

/* table-cell方式 */.wrap_2_outer { border:1px solid red; width:200px; height:200px; display:table-cell; font-size:0; text-align:cente