我有下面的例子来演示一个试图停留在DIV中间的字体，使用普通文本操作和Flex显示操作。两者似乎都将字体放在中间，但是，当您的浏览器没有最大化并且您尝试更改浏览器的宽度时，两种字体都会在DIV中摆动（您必须慢慢地执行此操作才能看到效果）。

我做了一个动画GIF来展示我所说的：

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

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

<代码>DIV{显示：Flex；Justify-content：中心；边距：10px；}span.text{高度：30px；宽度：30px；行高：30px；文本对齐：居中；字体大小：30px；字体粗细：粗体；颜色：白色；背景：绿色；}span.flex{高度：30px；宽度：30px；显示：Flex；align-items：居中；Justify-content：中心；字体大小：30px；字体粗细：粗体；颜色：白色；背景：绿色；}

<代码><；细分（>；）<；SPAN CLASS=“ TEXT ”>；+<；/span>；<；/DIV>；<；细分（>；）<；SPAN CLASS=“ FLEX ”>；+<；/span>；<；/DIV>；

顺晟科技：

这是字体的子像素渲染问题。通过创建一个转换层，我们可以以某种方式修复这种抖动。试试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; }用于span元素

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

基本原理

让我们假设一个1000px宽度的视口。中心点为500px。如果视口宽度为1001px，则中心点为500.5px

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

因此，在1000px&；中，字体char（+）的中心点都是500px.1001px视口案例。而绿框的中心点为500px&；500.5px.

为了解决这个问题，我们可以为绿色的盒子创建一个层。将层视为缓存区域，除非必要，否则不会重新渲染。通过对元素应用变换，可以在层中绘制该元素。在这里，我使用了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; }，这是一个与转换相关的属性。您还可以使用产生类似结果的转换属性。

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

您可以阅读本文中的https：//dassur.ma/things/forcing-layers/内容，以获得更清晰的理解。

<代码>P{文本对齐：居中；}

<代码><；细分（>；）<；SPAN CLASS=“ text ”>；<；P>；+<；/p>；<；/span>；<；/DIV>；<；细分（>；）<；SPAN CLASS=“ FLEX ”>；<；P>；+<；/p>；<；/span>；<；/DIV>；

您可以通过将文本放入"；p"；中来指定文本。或不同的“ H ”标签并全局