牧羊岛

懒是不会有好果子吃滴//

导航

解读淘宝的面试题-使用纯CSS实现垂直居中

Posted on 2010-06-04 17:07  牧羊岛  阅读(1085)  评论(0)    收藏  举报
原题

CSS：使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。

想起了vertical-align:middle;但是不行，后来才知道还要display:table-cell;才可以，但是display:table-cell;这个在IE是没有用的，于是就想用line-height来解决，无果。

 

看答案： 

<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="简单的XHTML页面" />
<meta name="Description" content="这是一个简单的XHTML页面" />
<title>简单的XHTML页面</title>
<style type="text/css">
.box {display: table-cell;vertical-align:middle;width:200px;height:200px;text-align:center;/* hack for ie */*display: block;*font-size: 175px;/* end */border: 5px solid red;}
.box img {vertical-align:middle;}
</style>
< /head>
<body>
<div class="box">
<img src="http://justinyoung.cnblogs.com/images/cnblogs_com/justinyoung/2007/tb_m.PNG"  alt="" />
</div>
</body>
</html>

淘宝招聘官评语：

 

很遗憾，这个解法用到了css hack。我们也不理解为什么设置font-size可以让IE显示垂直居中的效果。根据我们的计算，高度/字体大小的比值为1.14左右时IE可实现垂直居中。
当然还有很多其他的实现方案，但需要引入额外的标签。对于流量超大的淘宝网而言，我们经过权衡，倾向于在此问题上合理的使用hack。