在曾经的 淘宝UED 招聘 中有这样一道题目：
“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”
当然出题并不是随意，而是有其现实的原因，垂直居中是 淘宝 工作中最常遇到的一个问题，很有代表性。
题目的难点在于两点：
- 垂直居中；
- 图片是个置换元素，有些特殊的特性。
至于如何解决，下面是一个权衡的相对结构干净，CSS简单的解决方法：
.box {
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;
/*设置水平居中*/
text-align:center;
/* 针对IE的Hack */
*display: block;
*font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/
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>当然还有其他的解决方法，在此不深究，有兴趣的可以阅读下：
：
共有30 条评论
《Vertical Middle》：通过添加一无语义图片来解决图片居中问题，源自韩国Yahoo
font-size: 175px;/*约为高度的0.873，200*0.873 约为175*
请教为什么是0.873啊？
学习了。。。-v-.
圆心用的似乎是将其 display 为表格元素（这样做其实和表格无异），不过从“教科书”（语义）商说，
display: table-cell;
最好被
display: table
包围。
这里还有篇文章，也值得参考：
http://www.blueidea.com/tech/web/2006/3231.asp
【转】图片垂直居中的使用技巧…
以前也经常遇到未知高度的图片或者文字垂直居中的问题，搞一堆代码，最后才使的图片垂直居中了，太麻烦，甚至现在我的博客上面的rss的图标，还没有垂直居中。
今天怿飞的博…
解决方案没有问题，但是我的理解有些不同：
1. font-size和高度的比和字体有关，不同的字体有不同的比率；
2. 另外我觉得hack失效不是编码的问题。
当时在淘宝UED就已看过此解，对使用这个*font-size: 175px;还是觉得不很明智
@云谦 font-size和高度是否和字体有关，自己没有去深究（毕竟仅是一个Hack），但我们简单测试了设置了几个常用字体和未设置字体的情况下基本表现是一致的，这个hedger也曾提出过疑问。失效的环境是我在B2C开发的时候碰到的，而我给出的font-family仅是一个解决方案而已，同样对于此也没有去深究。
@小宁 更希望看到你明智的做法。无谓的增加结构是我一直不提倡的做法。但至少提供的解法，没有给结构添加多余的标签，样式代码也很简洁，而且在跨浏览器上表现也大体一致，当然也有他本身不少的缺点。有缺点有好处在才会有权衡。
@西风坊 0.873这个数据是试验算出来的比例，呵呵……
感觉还是1/8好算些…不过效果会偏移几像素……韩国的那个链接貌似失效了..另外:把这个淘宝的广告放右边吧..留言框档了半截…
@MarVell 恩，广告放右边，自己的显示器分辨率大点，没注意，谢谢提醒！
在BOX里加了下这个
margin-top: 26px;
margin-left: 7px;
margin-right: 14px;
在火狐里就不居中了，为什么啊
google pages撞墙了。。。不过韩国那孩子想法真不错，也不用hack了，我恨hack我恨IE6我恨垃圾代码
我试了下，确实不错，只是还有个疑问要向怿飞请教，那个font-size的值为什么一定要是高度的0.873，我也试了下将高度设为更大，但这会撑大父元素的高度，不知是什么原因？
我自己常用的解决方案:CSS把图像做背景,水平垂直都居中
@Lin.X 你说的方式的确很方便，但如果图片都是读取数据的话，你这个方式就比较麻烦，开发人员不可能去接触你的CSS文件，另如果用内联的style，会影响HTML的干净。
如果图片都是读取数据的话,Ajax去控制可以符合你的要求吧,呵呵
哦,怎么才能有头像啊,我没用过WP
貌似也没哪能注册呢
先看 在研究
在设置多个图片水平放置时，加了float:left;后在firefox里就不在垂直居中了。
因为有了display: table-cell后，所以float:left就无法居中排列显示了。
同时将div放在li中，如果BOX中使用padding的，在FF与Opera中也会出现高度不一。
补充一点，如果高度设置低于107PX，在FF与Opera中也会出现高度不一的情况。大家不仿可以试一下。
@菠菜 @Juven 谢谢大家的意见，你们提到的有些问题在实践的过程自己也碰到，但其实任何方法都有其某些缺陷，我们需要做的是在合理的位置使用合理的方法。
@Juven 对于你的第二个问题，看看你的例子是否是满足本例的基本条件的。
膜拜这方法~
用2个div模拟出的垂直居中不及这个fong-size方法好~~
非常好的方法，谢谢！！！！
我在几个浏览器里测试后算了下，用Arial字体那个比例应该是0.89……，还有在IE里如果用宋体的话那个比例就是1，也就是可以将font-size设置成需要的值200px。
能转不？
学习～