CSS技巧如何使图片自适应DIV垂直居中与水平居中

　　CSS技巧如何使图片自适应DIV垂直居中与水平居中
网站首页图片形形色色，各种尺寸都会有，可能一条CSS规则也满足不了所有图片对于DIV进行自适应尺寸，以及垂直居中、水平居中。
下面我们就来看以下利用CSS可是使所有图片对应不同尺寸规格的DIV宽度进行自适应，而且让图片根据DIV宽度成比例的按高度进行缩放。
老规矩先贴代码：
<style type="text/css">
#zongk { width:500px; margin:0 auto; height:500px; display:table; border:1px #000000 solid;}
#zongk span { display:table-cell; vertical-align:middle; text-align:center;}
#zongk span img { max-width:100%; max-height:500px;}
</style>
<div id="zongk">
<span><img src="img/1.gif"/></span>
</div>
CSS技巧如何使图片自适应DIV垂直居中与水平居中主要是利用的table表格中：vertical-align:middle; 这个属性， 利用display:table;将DIV模拟成table.
细心可以发现在IMG标签上又套了一个span,这里利用display:table-cell;将其模拟成类似表格的TD元素，这样vertical-align:middle;垂直居中起到效果

TAGS:CSS技巧 , 图片自适应 , 垂直居中 , 水平居中

来自Davids zhou博客原创文章请尊重作者：http://www.zongk.com/zongk/80.html转载请标注此链接