如何在浏览器宽度变化时让文字在固定尺寸div中稳定居中不抖动？

问题场景：分别使用常规行高对齐和flex布局两种方式实现文字在固定宽高div内居中，缓慢调整浏览器宽度时文字会出现轻微抖动，要求实现文字绝对稳定居中，不能使用图片，必要时可用SVG。

抖动原因 #

该现象是浏览器亚像素布局计算与字体渲染hinting策略共同导致的：调整浏览器宽度时，页面根布局的微小像素偏移会传导到内部容器，文本渲染时为了保证显示清晰度，默认会自动对齐像素栅格，哪怕容器和字体大小都是固定值，也会出现肉眼可见的位置偏移。

解决方法 #

方案1：优化CSS渲染规则（无需改动HTML结构） #

给文字容器添加强制精确渲染的规则即可解决，修改后的完整CSS如下：

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;
  /* 新增修复规则 */
  text-rendering: geometricPrecision;
  transform: translate3d(0, 0, 0);
  flex-shrink: 0;
}

span.flex {
  height: 30px;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: bold;
  color: white;
  background: green;
  /* 新增修复规则 */
  text-rendering: geometricPrecision;
  transform: translate3d(0, 0, 0);
  flex-shrink: 0;
}

新增规则作用说明：

• text-rendering: geometricPrecision 关闭字体自动对齐像素栅格的hinting优化，严格按照几何坐标渲染文字，避免主动偏移
• transform: translate3d(0, 0, 0) 开启GPU独立层合成，让容器渲染逻辑和页面主布局流隔离，避免窗口调整时的布局波动传导
• flex-shrink: 0 禁止容器被flex父元素挤压，保证宽高始终为设定的固定值

方案2：SVG内嵌文本（稳定性最高） #

如果要求绝对无抖动，优先选择SVG方案，SVG文本的坐标完全独立于HTML布局逻辑，不会受浏览器文本布局规则影响，完全符合「必须为字体、不能使用图片」的限制，示例代码如下：

<div>
  <svg width="30" height="30" style="background: green;">
    <text x="15" y="15" text-anchor="middle" dominant-baseline="middle" fill="white" font-size="30" font-weight="bold">+</text>
  </svg>
</div>

该方案中文本位置完全由x、y属性精确控制，无论浏览器窗口如何调整，都不会出现位置抖动。

内容的提问来源于stack exchange，提问作者user1589188