二种行得通解决方案_前端工程师

序言

在日常合理布局页面上，大家经常遇到让一个元素水准居中的现象。而 transform: translate(-50%, -50%) 是其中最为常见的方式之一。可是，你是不是以前经历过这样的状况：如果你应用此方法来垂直居中某一原素时，该原素内部文本出现了模糊不清的状况？文中就把详解这些问题的缘故，并做出解决方法。

根本原因

最先，我们应该明白为什么使用 transform: translate(-50%, -50%) 垂直居中原素时会有字体模糊的现象。这主要是因为浏览器渲染体制所导致的。

在我们应用 transform: translate(-50%, -50%) 对要素开展垂直居中操作过程中，事实上应该是该原素运用了一个 2D 变换。这一变换不但会更改元素部位，还会造成原素被放置于一个虚拟涂层上。某些情况下，电脑浏览器很有可能会把这一虚似涂层和实际网页页面中的某些原素混合在一起开展3D渲染，可能会导致字体模糊的现象。

解决方法

即然大家已经知道此问题的主要原因，那样处理起来也是就更容易了。以下是二种行得通解决方案：

方案一：应用 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 涂层，从而减少原素被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。因而，我们要在具体设计中，根据实际情况选择适合的计划方案，以保证界面的性能和客户体验。

大量题型

/column/7201…