今天小编跟大家讲解下有关CSS教程：网页图片垂直居中的使用技巧 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS教程：网页图片垂直居中的使用技巧 的相关资料，希望小伙伴们看了有所帮助。
在曾经的 淘宝UED 招聘 中有这样一道题目：“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”当然出题并不是随意 而是有其现实的原因 垂直居中是 淘宝 工作中最常遇到的一个问题 很有代表性。题目的难点在于两点： 垂直居中； 图片是个置换元素 有些特殊的特性。 至于如何解决 下面是一个权衡的相对结构干净 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>当然还有其他的解决方法 在此不深究 有兴趣的可以阅读下：《Vertical centering using CSS》 《Vertical centering using CSS》（标题和上同 内容不同） 《CSS List Grid Layout》来源：爱蒂网
