【正当中系列】大小不固定的图片在固定容器中的水平垂直居中
一般在做产品页面的时候，如果产品图片宽高定死的话，有的图片就会变形，如果把宽给个最大宽，高自适应的话有的图又会由于是个长方形高超出了容器，这样就不得不截掉一部分图。于是就想着，首先不管图片是个什么比例，不管它是宽远大于高或者高远大于宽，统一设置最大的宽高值，不让它超出容器，并且这样处理图片不会变形。接下来想怎么处理图片大小不定，在固定容器中水平垂直居中的问题。
参考链接：
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的链接。
- 2楼木的树
- 建议楼主能详细讲解一下原理
- Re: 炼心
- @木的树，内容基本都是参考链接里面的东西，我只是提取，修改部分适合自己工作的东西。如果想了解更多，可以去看看贴出的两位大神的链接，他们讲得更为详细。谢谢支持
- 1楼ChokCoco
- http://www.cnblogs.com/coco1s/p/4444383.html，可以看看
- Re: 炼心
- @ChokCoco，CSS3方法的那个好像有点问题。360极速模式并没有居中。我不了解flex布局，做的项目也都得考虑兼容。不过后期肯定会慢慢了解的，感谢分享