CSS 里的「薛定谷的居中」—— 一个让程序员集体破防的千古难题

朋友，你经历过绝望吗？

问：让一个前端程序员崩溃的最快方式是什么？
答：让他居中一个 div。

这就像你妈让你收拾房间——看起来很简单，但就是找不到一个通用的方法。每次都是「这次应该稳了」→「怎么又歪了？」的无限循环。

今天这篇文章，咱们就来盘一盘 CSS 居中的前世今生，让你彻底告别「薛定谷的居中」——也就是那种在你预览之前，永远不知道它到底在哪儿的状态。

第一招：text-align: center（古早味）

适用于行内元素水平居中。

.parent { text-align: center; }

优点：简单到婆婆家。缺点：只会水平，垂直？不存在的。

第二招：margin: 0 auto（爷爷辈的智慧）

.child { width: 300px; margin: 0 auto; }

稳如老狗，但必须显式设置宽度。

第三招：Flexbox（当现代人）

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

真·居中。水平垂直一起搞定，就像你妈不仅收拾了桌面，还叠好了衣柜。

第四招：Grid（终极形态）

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

两行代码，居中完成。前端界的一小步，人类文明的一大步。

最终奥义：绝对定位 + transform

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

不知道自己多宽多高，但能把自己拉回来。

总结

水平居中 text 或 margin，垂直居中 flex 或 grid，实在不行 transform，再不行就换工作。

祝大家居中顺利，下班准点！