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

【问题标题】：How to TRULY vertically center text with flexbox?如何使用 flexbox 真正垂直居中文本？
【发布时间】：2017-12-05 13:58:23
【问题描述】：

因此，使用justify-content 和align-items center 使文本垂直居中看起来很简单，但是当我仔细观察时，我发现文本并没有真正居中。它在字符顶部的间距较小。我试图通过在线搜索进一步调查，发现了这个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>

【问题讨论】：

使用 flexbox 使文本居中对我来说毫无意义。是否有一些非常不寻常的特殊情况可以解释为什么你会这样做？或者是您在没有 flexbox 的情况下显示的 CSS 的问题，因为坦率地说，您显示的内容非常复杂。不应该那样做。
不，由于您在该文章中找到的确切原因，没有其他方法可以真正垂直居中文本。
line-height: 1 可以帮助保持垂直居中的一致性

标签： html css flexbox centering

【解决方案1】：

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

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

在第三个版本中，我将这两个字母组合成一个单词。在这里您可以看到不同的字符/字母确实确实延伸到整个宽度，因此垂直居中是正确的。

行高（以及与此相关的字母的垂直对齐方式）不取决于使用了哪些字母 - 它始终适用于所有可能的字母/字符，即使它们没有被使用在那种特殊情况下。

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>

【讨论】：

这解释了为什么它不起作用但你知道如何在 div 中垂直居中一个字符吗？
这取决于它是哪个字符。基本上你只能尝试不同的padding-top' and padding-bottom` 设置。但即便如此，您也有风险，即字符在不同字体中的比例会有所不同。它还取决于字体大小和行高。这是一个反复试验的过程，始终只适用于一种特定情况。

【解决方案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>

【讨论】：