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

这种用法很常见，特记录一下。我用了两个不同大小的图片，存放图片的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;
			}

运行效果如下：