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
提问by Ken Avila
I want to center my div
and I use this method, but it makes my texts inside the div
blurry:
我想居中我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);