【居中系列】大小不固定的图片在固定容器中的水平垂直居中_html/css_WEB-ITnose

一般在做产品页面的时候，如果产品图片宽高定死的话，有的图片就会变形，如果把宽给个最大宽，高自适应的话有的图又会由于是个长方形高超出了容器，这样就不得不截掉一部分图。于是就想着，首先不管图片是个什么比例，不管它是宽远大于高或者高远大于宽，统一设置最大的宽高值，不让它超出容器，并且这样处理图片不会变形。接下来想怎么处理图片大小不定，在固定容器中水平垂直居中的问题。

参考链接：

张鑫旭：大小不固定的图片和多行文字的垂直水平居中

w3cplus大漠：css制作图片水平垂直居中

对比了一下他们的方法，发现张鑫旭的方法① 透明gif图片+背景定位，我们做产品页面都是用的img而不是背景，有点担心后台会不好弄，所以一般不想用这种方法；方法② display:table-cell和文字大小控制居中，没有链接，如果给图片加了链接在ie7里面错位了，方法③ display:inline-block和文字大小控制居中，那个效果并不是自己想要的，方法④ 使用空白图片实现垂直对齐，这方法感觉不如w3cplus大漠的简便。

经过对比综合考虑，总结出以下方法。

 

1.推荐使用方法（利用font-size:0与空白标签） 

 

 

2.建议掌握技巧。利用display:table-cell与display:inline 

也许这种方法较第一种更为繁琐，还得写兼容ie的hack，但是我觉得用display-table和vertical-middle在现代浏览器中实现图片垂直居中是很值得学习的。如果以后不需要做低端浏览器的兼容了，这种方法应该会更适合我。

 3.jquery方法。

将图片转换为其父元素的背景图片，并且在其父元素中居中显示背景图片，然后在将其自身的透明度设置为“0”， 这样也能达到图片居中的效果。

这种方法主要是学习这种思路。但是我自己测试后发现并不适用于图片很大的情况，那样就算我把img设置了max-width,max-height也没用。变成背景后它依然会显示原图大小。所以这里就不贴出来了。有兴趣的可以自己去看看上面大漠w3cplus的链接。