CSS flexbox : Text isn't perfectly centered despite justify-content and align-items set properly

Question

我有一个数字网格，所选数字必须以背景渐变显示。所以我使用了带有 flex-box 的正常程序，正如我们在代码中看到的那样。但是数字并不像它应该的那样恰好位于正方形的中心。

.cell {

  /* Square definition */
  width: 100px;
  height: 100px;
  border: 1px solid black;
  font-size: 2rem;
  
  /* Centering */
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* Background at the center */
  color: white;
  background: radial-gradient(ellipse at center, red 0%,red 50%, transparent 55%);
}

<div class="cell">15</div>

为什么会这样？如何在没有任何额外标记的情况下使数字正好位于正方形的中间？

编辑: 左边是现在的样子，右边是我认为应该的样子。浏览器是 Linux 上的 Chrome。

编辑 II: 此标记在 Linux 上的呈现方式肯定存在问题。这是我对 codepen 的看法由评论中提供的 G-Cyr 提供:

我在 Windows 上尝试了相同的代码笔，它显示的数字完全居中。

Answer 1

我认为这不是 flex-box 问题，而是与行高有关。克服这个问题的一种方法是通过像这样的实验来手动调整行高:

.cell {

  /* Square definition */
  width: 100px;
  height: 100px;
  border: 1px solid black;
  font-size: 2rem;
  
  
  /* Centering */
  display: flex;
  justify-content: center;
  line-height:6.7rem;

  color: white;
  background: radial-gradient(ellipse at center, red 0%,red 50%, transparent 55%);

}

<div class="cell">75</div>