CSS flex-box：尽管 justify-content 和 align-items 设置正确，但文本并不完全居中

Posted 2023-03-05

【中文标题】CSS flex-box：尽管 justify-content 和 align-items 设置正确，但文本并不完全居中

【英文标题】：CSS flex-box: Text isn't perfectly centered despite justify-content and align-items set properly

【发布时间】：2019-02-05 17:53:43

【问题描述】：

我有一个数字网格，所选数字必须以背景渐变显示。所以我使用了带有 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，它显示的数字完全居中。

【问题讨论】：

但我看到它居中.. :)

可能您使用的浏览器没有很好的弹性盒功能（例如，IE）...请截取屏幕截图并使用编辑器中的图像工具将其添加到您的问题中。

我做了一个测试页，添加了一个叉号来显示中间，最后一个是你说好的图片。 codepen.io/anon/pen/vzyorQ 。对我来说，文本是垂直居中的 (ff w7) 。 （字体对我来说要厚得多）

@G-Cyr 我用你的 codepen 更新了这个问题。谢谢你。

ff 61.0.2 在 macos 上没有显示完全居中，但 Chrome 68 可以。

【参考方案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>

【讨论】：

调整行高可能是个好主意，但是当使用不同的字体系列时，它需要不同的值。我们不知道 op 使用的是哪个 :( ，所以很难猜出会做的值是什么。

@G-Cyr 是的，我同意。但是我没有看到有人提到font-family会经常改变。如果这是后备字体的问题，那么解决方案可能是加载屏幕，仅在加载正确的字体时才显示内容。取决于这是否可以以更语义的方式解决。如果不是，这是一个选项。

看起来无论如何都是浏览器渲染问题。但是字体在绘制的大小和位置上可能会有很大的不同，这里的操作使用了一个漂亮而智能的字体（helvetica），带有安全的后备，以避免在丢失时出现棘手的渲染；）