如何使用 flexbox 真正垂直居中文本？

Question

所以垂直居中文本看起来很简单 justify-content 和 align-items 居中但是当我仔细观察时我发现文本并没有真正居中。它在字符顶部的间距较小。我试图通过在线搜索进一步调查，我发现了这个 https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align 但必须有一个更简单的解决方案。

例子 https://jsfiddle.net/z7cy487o/

html,
body {
  height: 100%;
}

.box {
  height: 10%;
  width: 400px;
  background: #000;
  font-size: 11vh;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
  justify-content: center; /* align horizontal */
  align-items: center;     /* align vertical */
}

<div class="box">
  C
</div>

Answer 1

您的感知方式取决于您使用的字符。我复制了你的例子两次以显示不同的情况：

在第二个版本中，我只使用了字母 "y"，它有一个下降部分，即延伸到基线以下的部分，延伸到定义为 line-height 的区域的下边界.另一方面，它并没有完全上升，所以它似乎与第一个版本（字母"C"）关于垂直对齐完全相反。

在第三个版本中，我将这两个字母组合成一个词。在这里你可以看到不同的 characters/letters 在一起确实 do 延伸到整个宽度，所以垂直居中是正确的。

行高（以及与之相关的字母垂直对齐）不取决于使用的字母——它总是适用于所有可能的letters/characters ，即使在特定情况下未使用它们。

html, body { height: 100%; }
.box
{
    height: 10%;
    width: 400px;
    background: #000;
    font-size: 11vh;
    color: #FFF;
    text-align: center;
    padding: 0 20px;
    margin: 20px;
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
}

<div class="box">
C
</div>

<div class="box">
y
</div>

<div class="box">
Cyborg
</div>

Answer 2

此解决方案基于 Center text character ☢ vertically and horizontally within a circle (CSS) 的修改版本它似乎适用于动态高度，但正如约翰内斯在他的回答评论中提到的那样。我相信该解决方案只会适用于我的情况。

html,
body {
  height: 100%;
}

.box {
  height: 10%;
  width: 400px;
  background: #000;
  font-size: 11vh;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
  justify-content: center; /* align horizontal */
  align-items: center;     /* align vertical */
}

.char {
  line-height: 1px;
  font-family: sans-serif;
  font-weight: 500;
  position: relative;
  top: 0.05em;
}

<div class="box">
  <span class="char">C</span>
</div>

如何使用 flexbox 真正垂直居中文本？

How to TRULY vertically center text with flexbox?

html

css

centering

flexbox