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”）完全相反，涉及垂直对齐。

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

行高（与此相关，字母的垂直对齐）不取决于使用的字母 - 它总是适用于所有可能的字母/字符，即使它们未被使用在那种特殊情况下。

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将文本垂直居中？

2 个答案: