如何在改变字体大小的块元素中垂直居中文本？

我对垂直居中文本的常用方法是使用等于容器高度的行高。

因此，容器具有

height: 60px;
line-height: 60px;

并且子元素有

line-height: 60px;

这样可行。但如果你增加font-size高于 1em，那就搞砸了。更糟糕的是，浏览器的执行方式不一致！

这是一个 JSFiddle 演示：http://jsfiddle.net/tgv2rx7f/7/ http://jsfiddle.net/tgv2rx7f/7/。请注意 Firefox 中的大“A”。距离容器顶部太近。它在演示中看起来并没有那么糟糕，但在我的实际网站上它非常引人注目并且分散注意力。如果你在 Firefox 中修复它，那么在 Chrome 中它就太低了。

无论我做什么，我似乎都无法让它始终如一地工作。我玩过不同的vertical-align价值观，top, text-top, middle... 没有骰子。如果我将容器更改为，我就可以让它工作display:inline，但在我的布局中它需要是block or inline-block.

PS，我不能使用弹性盒。

Edit：这就是我在实际网页（蓝色）和 JSFiddle（绿色）中看到的内容。

Chrome:

Firefox:

Edit 2： 谢谢andyb指出这样一个事实：使用ems 将改变容器集的大小px。它还有助于揭示另一个复杂问题，即浏览器以不同的方式对待字体大小和高度，但这似乎超出了这个问题的范围，所以我创建了一个关于该主题的新问题（here https://stackoverflow.com/questions/27306894/how-to-get-consistent-line-heights-between-browsers）并标记andyb的答案已被接受。

在两个container and b阻止line-height and font-size导致块的高度发生变化。line-height and font-size互相互动！line-height是容器中文本行之间的垂直距离。所以与line-height:60px and font-size:2.5em容器的高度增长到 73px。这在 CSS 中被你的硬性反击height:60px在容器上，但这不会影响文本baseline。文字“1”。如果基线发生变化，容器中的内容将向上或向下移动。如果字体大小.a增加基线下降，拖动文本“1”。向下。您可以通过转动所有垂直对齐方式并增加字体大小来检查这一点.a和“1”。内容向下移动。考虑到这一点，我们实际上只需要修复容器的垂直对齐方式，如下所示：

.container {
  display: block;
  overflow: hidden;
  height: 60px;
  line-height: 60px;
  vertical-align: top;
  font-size: 2.5em;
  width: 100%;
  text-align: center;
  background-color: lightgreen;
  text-decoration: none;
}
.a {
  font-size: 2em;
}

<a href="#" class="container">
  1.<span class="a">A.</span><span class="b">b b b b b b b</span>
</a>

But the baseline仍然是底部的地方A是因为A是正常流程中的最后一个容器，请参阅：

并且只要.b字体大小小于.a那么基线将保持不变.a，请参阅下一张带有小字体的图像.b:

但是，请注意，.b容器继承了line-height:60px - see 为什么这个内联块元素的内容没有垂直对齐 https://stackoverflow.com/questions/12950479/why-does-inline-block-element-having-content-not-vertically-aligned/12950536#12950536，所以高度是正确的，我们可以vertical-align the .b到容器的顶部，其高度相同，因此导致文本居中对齐，如下所示：

.container {
  display: block;
  overflow: hidden;
  height: 60px;
  line-height: 60px;
  vertical-align: top;
  font-size: 2.5em;
  width: 100%;
  text-align: center;
  background-color: lightgreen;
  text-decoration: none;
}
.a {
  font-size: 2em;
}
.b {
  display: inline-block;
  font-size: 23px;
  vertical-align: top;
  font-family: sans-serif;
  text-align: center;
}

<a href="#" class="container">
1.<span class="a">A.</span><span class="b">b b b b b b b</span>
</a>