今天小编跟大家讲解下有关div图片垂直居中 如何使div中图片垂直居中 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关div图片垂直居中 如何使div中图片垂直居中 的相关资料，希望小伙伴们看了有所帮助。
div相对与table对于图片的垂直居中支持的并不好,特别对于不同浏览器的兼容性来说,这里我们看下一个简洁的css解决方法: 在曾经的 淘宝UED 招聘 中有这样一道题目： “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。” 当然出题并不是随意 而是有其现实的原因 垂直居中是 淘宝 工作中最常遇到的一个问题 很有代表性。 题目的难点在于两点： 1.垂直居中； 2.图片是个置换元素 有些特殊的特性。 至于如何解决 下面是一个权衡的相对结构干净 CSS简单的解决方法： 复制代码代码如下: .box { display: table-cell; vertical-align:middle; text-align:center; *display: block; *font-size: 175px; *font-family:Arial; width:200px; height:200px; border: 1px solid #eee; } .box img { vertical-align:middle; } <div class="box"> <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg"/> </div> <html><head><style>.box { display: table-cell; vertical-align:middle; text-align:center; *display: block; *font-size: 175px; *font-family:Arial; width:200px; height:200px; border: 1px solid #eee; } .box img { vertical-align:middle; }</style></head> <body><div class="box"> <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg"_fcksavedurl="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg"/> </div></body> 提示：您可以先修改部分代码再运行来源：爱蒂网
