让字体清晰无比，再也不发虚！教你解决 transform: translate(-50%, -50%) 造成的字体模糊问题

前言

在日常布局页面中，我们经常会遇到让一个元素水平垂直居中的情况。而 transform: translate(-50%, -50%) 是其中最为常用的方式之一。但是，你是否曾经遇到过这样的情况：当你使用该方法来居中某个元素时，该元素内部的文字却出现了模糊的情况？本文就将详细介绍这个问题的原因，并给出解决方案。

原因分析

首先，我们需要知道为什么在使用 transform: translate(-50%, -50%) 居中元素时会出现字体模糊的情况。这主要是由于浏览器渲染机制导致的。

当我们使用 transform: translate(-50%, -50%) 对元素进行居中操作时，实际上是对该元素应用了一个 2D 转换。这个转换不仅会改变元素的位置，还会导致元素被放置在一个虚拟的图层上。在某些情况下，浏览器可能会将这个虚拟图层与实际页面中的其他元素混合在一起进行渲染，从而导致字体模糊的情况。

解决方案

既然我们已经知道了该问题的原因，那么解决起来也就比较容易了。下面是两种可行的解决方案：

方案一：使用 transform3d 代替 transform

一个可行的解决方案是使用 transform3d 代替 transform。由于 transform3d 可以创建一个新的 3D 图层，因此它可以避免字体模糊的问题。以下是代码示例：

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d; /* 创建3D图层 */
  transform: translate3d(-50%, -50%, 0);
}

需要注意的是，在使用 transform3d 时，我们需要将 transform-style 属性设置为 preserve-3d。这样可以确保浏览器创建一个新的 3D 图层，从而避免元素被渲染在与其他元素混合的虚拟图层上。

方案二：使用 flexbox

另一个可行的解决方案是使用 flexbox。由于 flexbox 可以非常方便地实现元素的居中操作，并且不会引起字体模糊的问题，因此它也是一个不错的选择。以下是代码示例：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

需要注意的是，在使用 flexbox 时，我们需要将元素的容器设置为 display: flex，并分别将其子元素的 justify-content 和 align-items 属性设置为 center。

总结

通过本文的介绍，我们可以看到，当使用 transform: translate(-50%, -50%) 时会导致字体模糊的问题。但是，我们也给出了两种可行的解决方案：使用 transform3d 或者使用 flexbox。因此，我们应该在实际开发中，根据具体情况来选择合适的方案，以确保页面的效果和用户体验。

更多题目

juejin.cn/column/7201…