作者 | Niki
译者 | 平川
策划 | Tina
本文最初发布于 Niki 的个人博客。
对于居中显示，我们都知道该怎么做，它是如此得简单：
display: flex;justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */
（不要问为什么你需要记住四个单词而不是 horizontal 和 vertical 两个单词，这已经比以前好了）
如果你愿意，你也可以使用网格：
display: grid;justify-items: center; /* 水平居中 */align-items: center; /* 垂直居中 */
（不要问为什么 justify-content 变成了 justify-items）
如果你想学的话，我们可以从下面这个基本原理入手：
甚至是 ChatGPT 也知道如何把一个东西居中：
好吧，也许有点慢，但最终可以做到。
我要说的是：每个人都知道如何把某个东西居中。小事一桩。如果你不知道怎么做，也有现成的知识供你查阅。
然而，如果我们查看下实际的应用程序就会发现，它们并没有使用这些方法。我们看到：
或者：
甚至是：
显然，在知识和知识的应用之间，有些东西丢了。
理论上，理论和实践之间并没有什么不同。遗憾的是，我们生活在实践中。
让我们看一下到底发生了什么。
字     体
字体是罪魁祸首之一。未对齐的文本随处可见。让我们看一些例子。
苹果没做到：
微软没做到：
GitHub 没做到：
Valve 没做到：
Slack 没做到：
Telegram 没做到：
谷歌地图没做到：
说实话，像这样糟糕的按钮对齐，我不用找就能举出无数的例子：
我想你已经明白了。许多公司，无论大小，都未能免于文本居中的问题。
行     高
除了字体参数，下一个影响完美居中的问题是行高。
行高是一个复杂的话题。在这方面，Vincent De Oliveira 曾写过一篇经典的文章“深入理解 CSS：字体参数、行高和垂直对齐”。
下面是一些实际的例子。
Slack：
Notion：
Airbnb：
YouTube：
对齐两个位于不同容器中的东西几乎是不可能的：
虽然许多人尝试过：
但没有多少人成功：
CSS 可能是个障碍（不同的控件有不同的默认值，你必须在尝试对齐之前取消它们）：
没什么简单的办法，只能对照规范一点点来。
图     标
图标就像是与文本排成一行的小矩形。因此，所有由文本和行高引起的问题这里也都存在。众所周知，将文本与旁边的图标对齐是一项艰巨的任务。
Atom：
前 Twitter 平台：
iOS：
Mozilla：
YouTube：
有时候图标高过文本：
有时候文本高过图标：
有时候两者都未能完美居中：
有些图标就是普通的 HTML 表单控件：
有些添加了艺术效果：
感谢 @bee 提供图片 
有时人们会创造性地实现完美对齐：
但总体上，这是个让人绝望的游戏：
问题在于，CSS 也不能提供什么帮助。vertical-align有 13 种取值，但没有哪一个能有效地将文本和图标对齐：
text-align: middle 最接近对齐，但是按 x-height 而不是 cap-height 对齐，看起来还是不平衡：
这就是人们如此热爱 Web 编程的原因：总是充满挑战。
图标字体
对齐矩形相对简单。对齐文本则很困难。图标是矩形。如果我们把图标放到字体文件中会怎样呢？
现在，我们什么也对不齐了：
我们也没法设置图标大小。在上面的例子中，所有图标的字体大小和行高都做了同样的设置。如你所见，它们的大小、边距都不一样，没有哪一个真正地对齐了。
尽管有很多缺点，并且几乎没有任何好处，各家公司还是争先恐后地到处添加图标字体。结果就像下面这样：

macOS 10.14 → macOS 10.15
操作符不再是垂直对齐的，而且还很模糊。这都是因为切换到图标字体所致。
苹果公司是如此执着于图标字体，以至于他们甚至毁了 QuickTime 录制按钮：
看看吧：
是的，直到今天还是这个样子。计算器也一样。
但远不止这些，请看下面这些例子。
一：
二：
三：
四：
五：
六：
七：
和文本对齐一样，糟糕的图标对齐也是数不胜数。
技能问题
不只是程序员会遇到居中失败的问题。设计师也会：
当前版本/ 我的修复
图标的问题在于，有时候还需要考虑它们的形状：
糟糕的居中 / 良好的居中 
三角形处理起来特别难：
有时候太靠左：
有时候太靠右：
甚至可能过高（又是行高惹的祸）：
水平居中
你可能会想，只有垂直居中才这么难。不是这样的，水平居中也很难：
我认为这并没有什么深层次的原因，一切皆因人们不够严谨：
拜托！
这是个深思熟虑的决定吗？
我不得而知。图标也有这样的问题：
文本也是：
我们能做些什么：设计师
那么问题是什么？
一切皆因字体而起。现在，文本块的边界框看起来像下面这样：
问题在于，它还可以像下面这样：
或这样：
现在，如果你试图通过居中边界框来居中文本会怎样？
虽然矩形实现了完美居中，但文本还是偏了。
但是，即使字体参数可以不平衡，也不意味着它确实如此。现实中会发生什么呢？
事实上，大部分流行的字体都有点轻微的不平衡，许多还很明显：
字帽高度百分比
10% 不是个小数，在 13 号字体中可以占到一个完整的像素。如果再放大 2 倍，就比较明显了。
大体上，Segoe UI 就是 Github 在 Windows 上看上去像下面这样的原因：
解决方法很简单：收紧边界框，居中就是小事一桩了：
如果你使用 Figma，也可以这样做了（虽然不是默认的）：
我们能做些什么：字体设计师
如果你是一名字体设计师，请像下面这样设置字体参数，使ascender − cap-height = descender：
在视觉上像下面这个样子：
重要提醒：你不必将 ascenders/descenders 扩展到边界。如上图所示，ascender 空间并没有得到充分利用。只要让上述数值可以匹配即可。
无论是 Web 开发还是原生开发，为了避免麻烦，务必选择遵循此规则的字体。SF Pro Text、Inter 和 Martian Mono 似乎都已经做到了这一点，所以使用它们不需要额外做什么工作就可以实现完美居中。
要了解更多信息，可以阅读“字体大小没用；让我们来修复它”这篇文章。
我们能做些什么：Web 开发人员
从开发人员的角度来看，这有点棘手。
首先要搞清楚的是，你需要知道你将使用哪种字体。遗憾的是，如果你计划替换字体，这不会起作用。
我们将使用 IBM Plex Sans。它的参数如下：
你在设置font-size时，你设置的是 UPM（这个也等于1em）。然而，文本块实际占用的空间是 ascender 和 descender 之间的空间。
经过简单的计算，我们发现，设置padding-bottom: 0.052em可以得到想要的结果：
如下所示：
查看字体参数，请点击这里（ascender、descender、sCapHeight）。
现在，我们已经把问题解决了，对齐图标也不那么难了。设置vertical-align: baseline，然后下移(iconHeight - capHeight) / 2：
遗憾的是，你既要知道字体参数，又需要知道图标大小。但至少，这个方法有效。
我们能做些什么：图标字体
不要再使用字体图标。
使用普通的图片格式。为了帮你做出决策，我画了下面这张图：
看看苹果公司怎么费力地将复选标记放入矩形内，以及将矩形放到文本标签旁：
然而他们还是失败了！
没有什么比对齐两个矩形更容易的了。没有什么比尝试对齐被任意数量空白包围的文本更困难的了。
这是一场我们赢不了的游戏。
我们能做些什么：视觉补偿
作为开发人员，我们只能通过数学的方法实现矩形的完美对齐。因此，对于任何需要手动补偿的内容，可以将其放置在一个足够大的矩形中，并在其中实现图标视觉效果的平衡：
我们能做些什么：所有人
请一定注意。请务必小心。糟糕的居中可能毁掉原本不错的 UI：
但恰当的文本对齐可以让你的 UI 美妙如歌：
即使这很难。即使没有便捷的工具。即使你不得不搜寻解决方案。我相信，只要我们齐心协力，就能找到把一个矩形套在另一个矩形里而又不会把它弄乱的方法。
就我个人而言，我希望生活在一个 UI 美丽而平衡的世界里。我相信你也是。最终，一切都是值得的。
原文链接：
https://tonsky.me/blog/centering/
声明：本文为 InfoQ 翻译，未经许可禁止转载。
今日好文推荐
谷歌大裁员引发元老集体抗议：领导脑袋空空，无能的中层管理团队不断扩大
“真男人就应该用 C 编程”！用 1000 行 C 代码手搓了一个大模型，Mac 即可运行，特斯拉前 AI 总监爆火科普 LLM
德国再次拥抱Linux：数万系统从windows迁出，能否避开二十年前的“坑”？
系统 bug 致百人入狱，砸了 2.8 亿元仍上云失败！二十年了，这家大企业被日本软件坑惨了
继续阅读
阅读原文