图片在DIV中垂直居中和水平居中的方法
内容摘要
在图片缩略图列表当中，往往会遇到宽度、高度不同的图片，在等比例缩放的情况下，如何能够让图片在DIV中垂直或者水平居中呢？下面就介绍css的方法。
文章正文
在图片缩略图列表当中，往往会遇到宽度、高度不同的图片，在等比例缩放的情况下，如何能够让图片在DIV中垂直或者水平居中呢？下面就介绍css的方法。
如图：
这里，我们不考虑IE低版本的浏览器。主要针对于Chrome、Safari和高版本的IE内核浏览器。
代码如下：
.thumb{ width:120px; height:120px; border:1px solid #ccc; display:table-cell;/*最重要*/ vertical-align:middle;/*设置水平居中*/ }
.thumb img{ border:none; max-width:100%; max-height:100%; display:block; margin:auto;/*设置垂直居中*/ }
.thumb img{ border:none; max-width:100%; max-height:100%; display:block; margin:auto;/*设置垂直居中*/ }
代码注释
[!--zhushi--]
作者：喵哥笔记
