在曾经的 淘宝UED 招聘中有这样一道题目：
“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”

题目的难点在于两个方面：

  1. 垂直居中；
  2. 图片是个置换元素，有其专有特性。

至于如何解决，下面是一个权衡的相对结构干净，CSS简单的解决方法：

[coolcode lang=”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;
}




  
  


[/coolcode]

当然还有其他的解决方法，在此不深究，有兴趣的可以阅读下：