各大著名公司的一道css面试题

前言：

 

其实这道题很久之前了，但是有同学最近再次遇到了就说说吧，简单记录一下。

 

虽然个人觉得过于考试化，但是还是很能看出你的css功底和广度（遇到查过记录过）

 

 

题目：

 

 

使用CSS实现未知尺寸的图片在已知容器中水平和垂直居中。

 

 

html

 

 

<div class="container">
   <img src="" alt="" />
</div>

 

 

css 

 

 

.container{
    border:1px solid #000;
    width:180px;
    height:180px;
    line-height:180px;
    text-align:center;    //水平居中
    display:table-cell;
    vertical-align:middle;
    *font-size:157px;   // 高度*0.873的算法
}

.container img{
   vertical-align:middle;  //图片垂直居中
}

 

 简单地补充一些hack的知识：

 

1。 关于 *

IE都能识别*;标准浏览器(如FF)不能识别*；

   IE6能识别*，但不能识别 !important, 
   IE7能识别*，也能识别!important; 
   FF不能识别*，但能识别!important;

	IE6	IE7	FF
*	√	√	×
!important	×	√	√

 

 

2。 关于display: table-cell

 

 

table-cell

此元素会作为一个表格单元格显示（类似 <td> 和 <th>）

 

浏览器支持上IE8+以及其他的主流浏览器（IE6和7不支持）

 

 

 

扩展阅读参考：

 

1. http://www.zhangxinxu.com/study/200908/img-text-vertical-align.html

2. http://www.wufangbo.com/css-vertical-and-horizontal-center

3. http://www.planabc.net/2008/05/26/img_vertical_center_solution/