CSS：变换：翻译（-50％，-50％）使文本模糊[重复]答案

【问题标题】：CSS: transform: translate(-50%, -50%) makes texts blurry [duplicate]CSS：变换：翻译（-50％，-50％）使文本模糊[重复]
【发布时间】：2015-09-15 12:57:13
【问题描述】：

我想将我的div 居中并使用这种方法，但它会使div 内的文本变得模糊：

<!-- language: lang-css -->

#div {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

有没有办法让我的div居中？

【问题讨论】：

找到解决方案了吗？
好问题，我不认为它是重复的。
这不是重复的家伙！
我也很好奇。在许多情况下，使用 top + transform: translate 将是一个很好的解决方案，但这会阻止使用它。文本模糊，悬停过渡被破坏，并且某些元素在转换后的元素中定位不佳。对我来说显然是一个错误（仅限 Chrome）。
这个你搞定了吗？

标签： css text transform blurry

【解决方案1】：

在要翻译的元素块周围添加这些样式以修复抗锯齿，将 Z 轴平移为零值。

-webkit-font-smoothing: subpixel-antialiased;
-webkit-transform: translateZ(0) scale(1.0, 1.0);

【讨论】：

这似乎不起作用:(
如果没有任何效果，请使用transfom: scale(2); zoom: 0.5。为我工作！
@KushagraGour 而transfom: scale(2); zoom: 0.5 似乎工作 - 如果你使用 JS getBoundingClientRect() > 它会导致错误的计算。
缩放不是一个有效的 CSS 属性
如果不覆盖transform: translate(-50%, -50%)，就不能使用transform: scale(2);，因此无法翻译...