CSS flex-box：尽管正确设置了对齐内容和对齐项目，但文本并未完全居中

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上如何呈现此标记一定存在问题。以下是我在评论中提供的关于G-Cyr的codepen礼貌的方式：

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

Answer 1

我认为这不是一个弹性盒问题，而是与行高有关。克服这个问题的一种方法是通过试验一下手动调整行高：

.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>