极简主义网站：Header flexbox 文本在 Chrome 桌面上垂直居中，但在 Chrome 移动设备上不居中。为什么？

Question

<!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 像素

Answer 1

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

div 非常适合垂直居中，但由于您的文本全部为小写，光学对齐已关闭。字体并不总是以您期望的方式占据 space，部分原因是字体中的大多数字符不会占据上下的所有 space。文本与 space 的交互方式将因字体而异。将 'title' 更改为 "TITLE" 并查看它的外观。

摆弄行高可以在这里帮助你，或者你可以做 position: relative; top: -2px，或 transform: translateY(-2px) 或任何它是最有帮助的。

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

Answer 2

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

极简主义网站：Header flexbox 文本在 Chrome 桌面上垂直居中，但在 Chrome 移动设备上不居中。为什么？

Minimialist Site: Header flexbox text vertically centered on Chrome desktop, but not Chrome mobile. Why?

html

css

centering

flexbox