极简主义网站：标题 flexbox 文本垂直居中于 Chrome 桌面，但不是 Chrome 移动版。为什么？答案

【问题标题】：Minimialist Site: Header flexbox text vertically centered on Chrome desktop, but not Chrome mobile. Why?极简主义网站：标题 flexbox 文本垂直居中于 Chrome 桌面，但不是 Chrome 移动版。为什么？
【发布时间】：2020-06-10 23:36:23
【问题描述】：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

    <link href='https://fonts.googleapis.com/css?family=Niramit' rel='stylesheet'>
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <link rel="stylesheet" href="styles/normalize.css">
    <link rel="stylesheet" href="styles/style.css">
</head>
<body>
    <div id="main">
        <div class="bar">
            <div id="title" class="header-text">title</div>
        </div>
    </div>
</body>
</html>

https://jsfiddle.net/uey85nbj/

Chrome 桌面：上方 27 像素，下方 29 像素

Chrome 移动版：上方 40 像素，下方 31 像素

【问题讨论】：

你能改变字体并检查一下吗，看起来字体顶部有某种额外的填充

标签： html css flexbox centering

【解决方案1】：

如果您在包含您的文本的 div 上放置背景颜色，您将了解正在发生的事情（这就是我在 Firefox 和 Chrome 桌面上的样子，所以我不知道如何你得到了你的第一张截图）：

该 div 垂直居中非常好，但由于您的文本全部为小写，因此光学对齐已关闭。字体并不总是以您期望的方式占用空间，部分原因是字体中的大多数字符不会占用上方和下方的所有空间。文本与空间的交互方式会随着字体的变化而变化。将“title”更改为“TITLE”并查看它的外观。

在这里调整 line-height 可以为您提供帮助，或者您可以执行 position: relative; top: -2px 或 transform: translateY(-2px) 或任何最有帮助的操作。

我也建议不要将 mm 作为一个单位；像素、ems/rems、百分比和视口单位可以更好地代表页面中事物的测量方式。

【讨论】：

如果这是正确的行为，为什么我们认为它在不同的浏览器上是不同的？
不确定。就像我说的，你的移动版 Chrome 屏幕截图是我在桌面版 Chrome 和桌面版 Firefox 上看到的，所以我无法重现你的测试用例。我唯一能想到的可能是它与mm 单位有关。

【解决方案2】：

正如@Akhil Aravind 建议的那样，字体似乎是问题所在。这是没有特殊字体的图像。

【讨论】：