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

问题

This question already has answers here:

Webkit-based blurry/distorted text post-animation via translate3d (19 answers)

Closed 4 years ago.

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

<!-- 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?

回答1:

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);

来源：https://stackoverflow.com/questions/31109299/css-transform-translate-50-50-makes-texts-blurry