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

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

网站首页图片形形色色，各种尺寸都会有，可能一条CSS规则也满足不了所有图片对于DIV进行自适应尺寸，以及垂直居中、水平居中。

下面我们就来看以下利用CSS可是使所有图片对应不同尺寸规格的DIV宽度进行自适应，而且让图片根据DIV宽度成比例的按高度进行缩放。

老规矩先贴代码：

#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;}

CSS技巧如何使图片自适应DIV垂直居中与水平居中主要是利用的table表格中：vertical-align:middle; 这个属性， 利用display:table;将DIV模拟成table.

细心可以发现在IMG标签上又套了一个span,这里利用display:table-cell;将其模拟成类似表格的TD元素，这样vertical-align:middle;垂直居中起到效果

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