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

最新推荐文章于 2025-06-30 07:23:59 发布

最新推荐文章于 2025-06-30 07:23:59 发布 · 161 阅读

文章标签：

#垂直水平居中 #css hack

css基础同时被 2 个专栏收录

48 篇文章

订阅专栏

前端面试题

37 篇文章

订阅专栏

本文详细介绍了如何使用CSS技巧实现在已知容器中对未知尺寸图片进行水平和垂直居中的方法，包括使用display: table-cell、vertical-align等属性，并解释了hack知识，提供了解决方案。

前言：

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

虽然个人觉得过于考试化，但是还是很能看出你的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;