CSS：transform：translate（-50％，-50％）使文本模糊 [英] CSS: transform: translate(-50%, -50%) makes texts blurry

问题描述

我想要使我的div和我使用这种方法，但它使我的文本内的div模糊：

I want to center my div and I use this method, but it makes my texts inside the div blurry:

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

有没有办法使我的div居中？请帮助感谢：）

is there any way to center my div? please help thanks :)

推荐答案

在要翻译的元素块上添加这些样式以修复抗锯齿，轴具有零值。

Add these styles around elements blocks which you are translating to fix the anti-aliasing, Translate Z-axis to have a zero value.

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

这篇关于CSS：transform：translate（-50％，-50％）使文本模糊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！