CSS教程：图片的自适应居中和兼容处理

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

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

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

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

x200的图片：

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

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

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

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

/* 图片的背景图方式 */
.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处理。