计算机科学里最大的难题：居中显示

本文最初发布于 Niki 的个人博客。

对于居中显示，我们都知道该怎么做，它是如此得简单：

display: flex;justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */

（不要问为什么你需要记住四个单词而不是 horizontal 和 vertical 两个单词，这已经比以前好了）

如果你愿意，你也可以使用网格：

display: grid;justify-items: center; /* 水平居中 */align-items: center; /* 垂直居中 */

如果你想学的话，我们可以从下面这个基本原理入手：

甚至是 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 似乎都已经做到了这一点，所以使用它们不需要额外做什么工作就可以实现完美居中。

要了解更多信息，可以阅读“字体大小没用；让我们来修复它”这篇文章。

从开发人员的角度来看，这有点棘手。

首先要搞清楚的是，你需要知道你将使用哪种字体。遗憾的是，如果你计划替换字体，这不会起作用。

我们将使用 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 翻译，未经许可禁止转载。