CSS 居中为什么是前端面试必考题？因为面试官自己也不会！

Zhaobin 前端技术

先讲个真实故事

上周我一个朋友去面试前端岗，面试官笑盈盈地问：“来，用 CSS 给我把一个 div 水平垂直居中。”

我朋友随口说了 5 种方法。面试官脸色变了——因为他只会 3 种。

最终结果：我朋友没被录取。理由是“懂得太多，不好管”。

故事真假不重要，但 CSS 居中这件事，确实是前端圈的永恒之梗。今天我们就来掰扯掰扯，为什么一个 box 居中，能养活半个技术博客。

为什么居中这么难？

想象一下：你搬家，想把一个箱子放在客厅正中间。在现实世界，你只需要拿卷尺量一下，推两下就行——耗时 10 秒。

在 CSS 世界，这件事可以写成一篇硕士论文，题目叫：《基于 flexbox 与 grid 的二维空间元素排列优化策略研究》。

难的核心原因就一个：CSS 最初是被设计来排文字的，不是排盒子的。就好像你拿叉子喝汤——能用，但总感觉哪里不对。

人类已知的居中方式

来，我帮你盘点一下，从青铜到王者：

青铜：text-align + line-height

.parent { text-align: center; }
.child { display: inline-block; }

适用场景：2012 年之前的古董项目。现在已经不建议了，除非你想让接你代码的人骂你三天三夜。

白银：margin: 0 auto

.child { margin: 0 auto; }

经典水平居中法。但只能水平，不能垂直。就像你一个只会做番茄炒蛋的厨子——够用，但单调。

黄金：absolute + transform

.parent { position: relative; }
.child {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}

老派优雅，兼容性好。但是你要是不小心忘了在 parent 上加 position: relative……恭喜，你的 div 飞到页面左上角去旅游了。

钻石：flexbox（现代救星）

.parent { display: flex; justify-content: center; align-items: center; }

三行代码，解决一切。简单、优雅、强大。flexbox 是 CSS 届的方便面——看着朴实，但救过无数程序员的命。

王者：grid（终极武器）

.parent { display: grid; place-items: center; }

一行代码，要了亲命。这是 CSS 这些年来给人类最好的礼物，比 WiFi 密码共享还感人。

所以面试到底考什么？

考的不是你会不会居中，而是：

  1. 你会几种方法？ —— 说明你写过真实项目，不是只看了文档
  2. 你知不知道每种方法的坑？ —— 说明你踩过坑，不是只会 CV
  3. 你能不能把复杂问题说简单？ —— 说明你真的懂了

最后送你一句话：“能用 flex 别用 absolute，能用 grid 别写三斤代码。”

如果你今天之前还在用 margin-top: 45% 调垂直居中……没关系，我们都有不堪回首的过去。握爪

（完）

comments powered by Disqus