用 position: absolute 配合 left/top 定位 + transform: translate() 微调可避开亚像素模糊，因 left/top 落整数像素，transform 仅做整数微调；而纯 translate(-50%, -50%) 因宽高为奇数时产生小数像素偏移，触发 gpu 插值致文字发虚。
直接结论：用 position: absolute 配合 left/top 定位 + transform: translate() 微调，比纯 transform: translate(-50%, -50%) 更容易避开亚像素模糊。
为什么 translate(-50%, -50%) 容易模糊
它依赖元素宽高参与百分比计算，而实际渲染时浏览器会把 50% 换算成小数像素（比如 width: 301px → translateX(-150.5px)），触发 GPU 双线性插值。文字边缘一插值就发虚，不是 bug，是渲染机制使然。
常见错误现象包括：模态框文字边缘泛白、图标文字变糊、悬停缩放后字体突然失焦。
- 只要元素宽/高为奇数，
translate(-50%, -50%)几乎必出亚像素偏移 - 父容器尺寸动态变化（如响应式宽度）时，模糊会忽有忽无，极难复现
-
transform: translateZ(0)或backface-visibility: hidden不解决根本问题，只是“碰巧重置了渲染状态”
用 absolute + translate 替代纯 transform 居中
核心思路：让 left/top 负责大范围定位（落到整数像素），transform: translate() 只做最后 1px 级别的视觉微调（且可控为整数）。
使用场景：固定宽高的弹窗、卡片、tooltip 等需要精准居中的元素。
- 先设
position: absolute; top: 50%; left: 50%，此时左上角锚点已落在整数像素（浏览器对百分比 top/left 的舍入更保守） - 再用
transform: translate(-<code>Math.round(width / 2)px, -Math.round(height / 2)px) —— 注意这里用的是整数 px 值，不是百分比 - 如果宽高是变量，JavaScript 动态写入更可靠：
el.style.transform = `translate(${Math.round(-w/2)}px, ${Math.round(-h/2)}px)`
避免缩放/旋转引入模糊的参数控制
缩放和旋转比平移更容易破坏像素对齐，因为它们会拉伸整个纹理，GPU 插值影响被放大。
典型错误参数：scale(1.3)、rotate(3deg)、scale(0.87) —— 这些都会让文字边缘落在亚像素位置。
- 缩放优先用整数倍（
scale(1)、scale(2)）或 0.25 倍数（scale(1.25)、scale(0.75)），避开 1.1～1.9 区间 - 旋转尽量用 90° 倍数（
rotate(90deg)），非 90° 倍数时，加will-change: transform并配合image-rendering: pixelated（仅对位图有效） - 若必须用小数缩放，可尝试强制重绘：
transform: scale(1.02) translateZ(0)→transform: scale(1.020001) translateZ(0)，靠微扰触发新合成层
真正起效的像素对齐策略
所有“修复模糊”的技巧里，唯一稳定有效的，是让最终渲染坐标落在整数物理像素上。其他都是绕路或碰运气。
容易被忽略的细节：模糊不只发生在 transform 元素自身，还会传染给它的子元素 —— 尤其是文字直接子节点。
- 给文字容器加一层 wrapper，并对 wrapper 做整数 transform，文字本身不动
- 用
calc()替代百分比：left: calc(50% - 260px)（前提是 260px 是偶数且固定） - 在 JS 中监听
resize，对动态尺寸元素重新 round 坐标：el.style.transform = `translate(${Math.round(x)}px, ${Math.round(y)}px)` - Safari 和部分 Android WebView 对
translateZ(0)响应不稳定，别把它当通用开关
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
