图片在DIV中垂直居中和水平居中的方法

2015-09-29 16:18:40来源:威易网作者:icech

在图片缩略图列表当中,往往会遇到宽度、高度不同的图片,在等比例缩放的情况下,如何能够让图片在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;/*设置垂直居中*/ }
 
关键词:DIV垂直居中