是否可以在其边界框中垂直居中文本？答案

【问题标题】：Is it possible to vertically center text in its bounding box?是否可以在其边界框中垂直居中文本？
【发布时间】：2016-04-27 13:32:24
【问题描述】：

我的文字没有垂直居中，我的设计师指出了这一点。

但是，我使用正确的 CSS 来实现垂直居中，这不是问题。

问题在于字体本身。字形不在实际文本中居中。选择文本会显示它的边界框，从这里我可以看到文本下方的空间不均匀。

Line-height 似乎无法解决此问题。边界框仍然关闭，即使行高为 0。我可以在元素的顶部添加填充以尝试解决此问题，但这不会在使用此字体的许多元素之间进行扩展。

看起来不均匀的空间是因为下降。这是有道理的，但不幸的是，它并没有让我更接近于弄清楚如何真正垂直居中文本。

有问题的字体是 SouvenirStd-Medium，但我在许多其他网络字体中都注意到了这一点。无论使用哪个元素，它始终处于关闭状态...... h1，段落标签等。

虽然它可能不会有用，但这是我的标题样式示例：

font-family: SouvenirStd-Medium;
font-size: 5rem;
font-weight: 400;
font-style: normal;
line-height: 1.3;
letter-spacing: 0;

还有一个示例，说明我如何将文本置于环绕标签的中心。

div {
   display: flex;
   height:100px;
   align-items: baseline;
}

【问题讨论】：

“问题在于字体本身。” - 是的……没有单一的方法可以解决这个问题。任何解决方案都依赖于字体。如果设计师如此坚持，让他们找到没有这个问题的字体。
尝试显示：块或内联以外的东西
能否提供您正在使用的 CSS 代码？
它实际上看起来像是垂直居中的，你只是碰巧没有使用任何下降线低于基线的字符。
@Quantastical See - jsfiddle.net/Paulie_D/aL757cLp/1 甚至 line-height 都依赖于字体

标签： css

【解决方案1】：

行高不会解决问题，因为它会根据字体本身定义的顶部和底部间距在单个文本行的顶部和底部添加或减去相等的空间（请参阅line-height description at w3c for更多信息）。这意味着您需要找到不同的字体才能在不妨碍您的情况下获得所需的字体。

padding-top 或padding-bottom 如果您使用 em 作为单位，则效果很好，这是相对于字母的总高度（包括上方和下方的空间）。这将允许您在整个网页上以相同的相对量移动文本，与字体大小无关（您可以从那里使用line-height 来管理各行之间的距离）：

.font-timesnewroman {
  font-family: 'Times New Roman', serif;
  padding-top: 0.1em;
}

改编自我发现的一个黑客 in this blog post，如果上述方法对您不起作用（但应用范围也有点窄），这里有一个可能的解决方案：

div {
  height: 100px;
  margin-top: 40px;
  border: thin dotted gray;
  text-align: center;
}
.text {
  font-size: 100px;
  line-height: 0px;
  background-color: #9BBCE3;
}
.text::after {
  content:'';
  display: inline-block;
  height: 80%; /* adjust this to shift the text */
}

<div>
  <span class="text">Test</span>
</div>

这有以下特点和限制：

适用于上述解决方案不适用的元素，例如因为您尝试设置样式的元素已经有填充
允许您使用百分比或 em 值调整基线（因此它们可以随字体大小缩放）
使用后选择器可以实现一半，但是需要在要定位的文本周围有一个 span（或其他内联渲染）元素
仅适用于非换行行

【讨论】：