web前端|html教程
【居中系列】大小不固定的图片在固定容器中的水平垂直居中
web前端-html教程
一般在做产品页面的时候，如果产品图片宽高定死的话，有的图片就会变形，如果把宽给个最大宽，高自适应的话有的图又会由于是个长方形高超出了容器，这样就不得不截掉一部分图。于是就想着，首先不管图片是个什么比例，不管它是宽远大于高或者高远大于宽，统一设置最大的宽高值，不让它超出容器，并且这样处理图片不会变形。接下来想怎么处理图片大小不定，在固定容器中水平垂直居中的问题。
手机板文章网站源码asp,Ubuntu列出所有包,tomcat7和8的区别,python爬虫怎么爬,30岁学php好就业吗,秦义seolzw
参考链接：
wpf 实现源码,ubuntu改成静态ip,tomcat 注册表删除,爬虫知识总结,php怎么操作linux,东宝区seo关键词优化推广代理lzw
张鑫旭：大小不固定的图片和多行文字的垂直水平居中
c 自动更新 源码,ubuntu直接老是崩溃,tomcat弱口令漏洞利用,爬虫神器xpath,php做的论坛,百度seo关键词更新要多久lzw
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的链接。
