图片自适应父元素的大小，并左右上下居中

这种用法很常见，特记录一下。我用了两个不同大小的图片，存放图片的div都是等宽等高的。

HTML如下：

<div class="pic"><img src="index.jpg" /></div><div class="pic"><img src="one_03.png" /></div>

CSS如下：

.pic {width: 120px;height: 120px;margin: 40px auto;border: 1px solid #ccc;text-align: center;padding: 5px;}.pic:before {content: "";display: inline-block;height: 100%;vertical-align: middle;width: 0;}.pic img {max-width: 120px;max-height: 120px;vertical-align: middle;}

运行效果如下：