打开搜索引擎输入"CSS居中"，你会看到无数教程。flex布局、grid布局、align-items、justify-content——看起来很简单，对吧？但真到了写代码的时候，你是不是也经历过这样的瞬间：先用align-items，不对；换成align-content，还是不对；最后试试justify-content，终于对了，却不知道刚才发生了什么。

这篇文章的作者做了一件疯狂的事：他统计了所有能在容器中实现水平和垂直居中的方法，结果找到了整整100种。是的，100种。这个数字听起来荒谬，因为居中本该是个简单任务，通常两三行代码就能搞定。但问题在于，当你面对100个选项时，选择本身就成了负担。

打开网易新闻 查看精彩图片

这100个方法里，大约60个被作者标红——它们是hack技巧，不推荐在生产环境使用。剩下的约40个里，还有很多只是写法不同、本质重复的变体。真正"独特且有效"的方法，其实不到15个，甚至可能只有10个。作者把这个清单公开了，如果你好奇那些奇奇怪怪的hack是怎么工作的，可以去看看。

对于写惯了CSS的人来说，居中确实不难。但换个视角：一个新入门的前端开发者，面对align-items、align-content、justify-content、place-self、margin:auto这一堆属性，是什么感受？很多人会选择一种能跑通的写法，复制粘贴，然后赶紧进入下一个任务。作者警告说：别跳过"学习"这一步，否则你会在无数个深夜为莫名其妙的布局bug买单。

文章还埋了一些值得深挖的线索：安全居中（safe centering）、text-box属性、锚点定位（anchor positioning）中的居中技巧——这些可能是你连听都没听过的现代特性。如果你觉得自己已经精通CSS居中，这些隐藏技巧或许能打破你的认知。