根本原因是transform: translate(-50%, -50%)计算出小数像素坐标（如237.5px），迫使gpu插值渲染，导致文字丧失亚像素抗锯齿而发虚；flex/grid居中不糊因其布局对齐不触发合成层，保留cpu主渲染流的子像素能力。
transform居中为什么让文字发虚
根本原因不是“居中”本身，而是transform: translate(-50%, -50%)这类百分比位移在计算后常落不到整数物理像素上。浏览器把元素扔进 GPU 合成层渲染，一旦坐标含小数（比如 237.5px），GPU 就得靠插值采样画图——文字边缘没了亚像素控制，只剩灰度抗锯齿，自然糊。
哪些子元素最易模糊
模糊不是均匀发生的，以下情况风险最高：
- 父容器高度为奇数（如
475px），translateY(-50%)算出-237.5px→ 小数坐标 - 页面缩放非 100%（比如 Chrome 缩放 110%）或设备 DPR ≠ 1（如普通屏 DPR=1，Mac Retina DPR=2）
- 子元素含文本、细边框、SVG 图标等对像素对齐敏感的内容
- 父元素本身已触发合成层（比如有
will-change: transform或其他transform），叠加后更难校准
为什么 flex/grid 居中不糊
display: flex 和 display: grid 的居中逻辑不依赖元素自身尺寸参与定位计算，也不强制创建合成层：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
justify-content: center; align-items: center是布局阶段的盒模型对齐，浏览器仍用 CPU 渲染主文档流，保留子像素能力 -
place-items: center同理，且对 inline 元素、未设宽高的元素也稳定生效 - 它们不改变元素的渲染层级，不会触发纹理上传和 GPU 插值
真要硬用 transform，怎么减小模糊
如果必须用 transform（比如动画过渡、第三方库限制），优先做像素对齐，而非调字体平滑：
- 用
calc()替代纯百分比：transform: translate(calc(-50vw + 50%), calc(-50vh + 50%))，让 CSS 引擎更早尝试对齐视口像素 - JS 动态修正：获取真实位置后用
Math.round(y * window.devicePixelRatio) / window.devicePixelRatio四舍五入 - 避免混用
top/left和transform，两者叠加会破坏坐标合并，加剧错位 - 别加
translateZ(0)或will-change: transform“修复”模糊——这只会强化合成层，让问题更糟
真正容易被忽略的是：模糊是否真实存在，得打开 Chrome DevTools 的 Layers 面板确认该元素是否标了 “Composited”。没进合成层，却怀疑 transform 导致模糊，那就是排查方向错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
