CSS: transformer: translate (-50%, -50%) rend les textes flous

Question

Je veux centrer mon div et j'utilise cette méthode, mais elle rend mes textes dans le div flous:

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

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

est-il possible de centrer mon div?

Answer 1

Ajoutez ces styles autour des blocs d'éléments que vous traduisez pour corriger l'anti-aliasing, puis convertissez l'axe Z en zéro.

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