【技巧】未知宽高图片在已知宽高容器中垂直水平居中

html.html

<div class="goods_pic img_vh_box">
	<span class="inner">
		<a href="#">
			<img src="http://ppms.paipaioa.com/img/demo/60x60.png" alt=""></a>
	</span>
</div>

style.css

.goods_pic{width:80px;height:80px;border: 1px solid #CDCDCD;background-color:#fff;}
.goods_pic img{max-width:80px;max-height:80px;}
.img_vh_box{display:table;text-align:center;*position:relative;*overflow:hidden;}
.img_vh_box span.inner{display:table-cell;vertical-align:middle;*position:absolute;*left:50%;*top:50%;}
.img_vh_box span.inner img{vertical-align:top; left:-50%;top:-50%;*position:relative;*left:-50%;*top:-50%;}