CSS: transform: translate(-50%, -50%) делает текст размытым

Question

Я хочу сосредоточить свои div и я использую этот метод, но он делает мои тексты внутри div размыто:

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

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

есть ли способ центрировать мой div?

Answer 1

Добавьте эти стили вокруг блоков элементов, которые вы переводите, чтобы исправить сглаживание. Переведите ось Z, чтобы иметь нулевое значение.

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