web-dev-qa-db-ja.com

CSS：transform：translate（-50％、-50％）はテキストをぼやけさせます

divを中央に配置し、このメソッドを使用しますが、div内のテキストがぼやけます：

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

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

divを中央に配置する方法はありますか？

csscss3texttransformblurry
73
Ken Avila

翻訳する要素ブロックの周りにこれらのスタイルを追加して、アンチエイリアスを修正し、Z軸をゼロ値に変換します。

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