如何在浏览器宽度变化时使字体始终居中？

Question

我有以下示例来演示试图停留在 div 中间的字体，使用普通文本操作和 flex 显示操作。两者似乎都将字体放在中间，但是，当您的浏览器未最大化并且您尝试更改浏览器的宽度时，两种字体都会在 div 范围内摆动（您必须慢慢地这样做才能看到效果).

我制作了一个动画 GIF 来展示我在说什么：

由于字体大小是固定的，并且封闭 div 的宽度和高度也是固定的，因此更改浏览器的宽度应该不会影响封闭 div 中字体的位置.

如何使字体在中间绝对稳定（必须是字体，不是图像，可以是 SVG，但如果需要的话），从而在浏览器宽度变化时不摆动？

div {
  display: flex;
  justify-content: center;
  margin: 10px;
}

span.text {
  height: 30px;
  width: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  color: white;
  background: green;
}

span.flex {
  height: 30px;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: bold;
  color: white;
  background: green;
}

<div>
  <span class="text">+</span>
</div>
<div>
  <span class="flex">+</span>
</div>

Answer 1

p{
    text-align: center;
}

<div>
  <span class="text"><p>+</p></span>
</div>
<div>
  <span class="flex"><p>+</p></span>
</div>

您可以通过将文本放入“p”或不同的“h”标签来指定您的文本，并全局应用给定的 css

Answer 2

这是字体的子像素渲染问题。通过创建一个转换层，我们可以以某种方式修复这种抖动。尝试 backface-visibility: hidden; 跨度元素

span.text {
 backface-visibility: hidden;
}
span.flex {
 backface-visibility: hidden;
}

理由

让我们假设视口宽度为 1000 像素。中心点是 500px。如果视口宽度为1001px，中心点为500.5px

这个十进制像素值称为子像素。浏览器以子像素值呈现元素。但是，它不会以子像素呈现字体。

因此，在 1000 像素和 1001 像素视口情况下，字体 char(+) 的中心点均为 500 像素。而对于绿框的中心点是 500px & 500.5px.

要解决这个问题，我们可以为绿框创建一个图层。将图层视为缓存区域，除非必要，否则不会重新渲染。通过对元素应用变换，您可以在图层中绘制它。在这里，我使用了backface-visibility: hidden;，这是一个与转换相关的属性。您还可以使用产生类似结果的变换属性。

现在，当您调整视口大小时，绿色区域内的字体不会重新呈现。所以，你看不到紧张情绪

您可以阅读 https://dassur.ma/things/forcing-layers/ 这篇文章以更加清楚。

如何在浏览器宽度变化时使字体始终居中？

How to make font always in the middle when browser width changes?

html

css

alignment

vertical-alignment

text-alignment