CSS:transform: translate(-50%, -50%) 使文本变得模糊

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/31109299/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 11:19:26  来源:igfitidea点击:

CSS: transform: translate(-50%, -50%) makes texts blurry

csstexttransformblurry

提问by Ken Avila

I want to center my divand I use this method, but it makes my texts inside the divblurry:

我想居中我div并使用此方法,但它使我的文本div变得模糊:

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

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

is there any way to center my div?

有什么办法可以让我的居中div

回答by 4dgaurav

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

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

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