如何以独立于浏览器的方式垂直对齐文本？

Question

上下文：

我正在尝试使用 CSS 来显示我在空闲时间设计的游戏的扑克牌

我正在尝试做的事情，具体来说：

没有什么革命性的东西，我的卡片上有一个地方我需要写一些文字，我想让文字居中，这样看起来不错

我做了什么：

HTML 的相关部分是这样的：

<div class = "card_header">
    <div class = "card_cost">1</div>
</div>

以及相关的 CSS：

.card_header {
    position: relative;
    top: 110px;

    box-sizing: border-box;
    width: 100%;
    height: 75px;
}

.card_cost {
    position: absolute;
    top: 50%;
    right: 165px;
    transform: translateY(-50%);

    font-size: 60px;
    font-weight: bold;
}

有什么问题：

我希望card_cost 文本垂直居中在card_header 的上下边框之间，但是在我使用的浏览器（Firefox）下，文本有点太高了。我尝试使用top: calc(50% + 4px); 来解决这个问题，看起来像这样（更好一点）：

因为对我的口味来说感觉有点过分，所以我去检查了它在另一个浏览器（Safari）下的样子，看看它是否看起来一样，看起来像这样：

这是相反的问题：文字太低了。

我尝试添加 border: 1px dotted gray; 以更好地了解正在发生的事情，这就是我所看到的（左边是 safari，右边是 firefox）：

在 Safari 中，文本似乎在 card_cost 中垂直居中（这意味着如果我像最初那样简单地使用 top: 50%;，它可能会正确居中），但在 Firefox 中，该框似乎更大且文本方式- 盒内高。

这里到底发生了什么？为什么这取决于浏览器的行为不同？有没有办法使这个渲染相同？或者，更广泛地说，是否有任何独立于浏览器的方法让我在这里使文本垂直居中？

编辑：

因为有人在 cmets 中提到了line-height，所以当我为card_cost 添加line-height: 1; 时的样子（同样，左边是Safari，右边是Firefox）：

这样一来，在 Safari 下文本看起来不像以前那样居中了，而且在 Firefox 下更明显的是文本居中

Answer 1

我通常在具有 100% 高度的父级和 vertical-align: middle; 上使用无敌 :before。这样:before 就证明了其他内联块内容的合理性：

// I would apply this style everywhere
.card_header,
.card_header * {
  font-family: arial;
  box-sizing: border-box;
}

.card_header {
  position: relative;
  top: 110px;
  width: 100%;
  height: 75px;
  text-align: center;
  background-color: rgba(100, 0, 0, .1);
}

.card_header:before {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
  border-left: 1px solid blue;
}

.card_cost {
  display: inline-block;
  font-size: 60px;
  height: 60px;
  font-weight: bold;
  vertical-align: middle;
  background-color: rgba(0, 0, 100, .1);
}

<div class="card_header">
  <div class="card_cost">1</div>
</div>