css transform导致字体像素模糊的问题解决办法（多种方法，亲测有效）

css transform导致字体像素模糊的问题解决办法

通过 transform:translate(X,Y) 偏移元素达到定位的效果，但是相继出现的是，如果元素内部有字体的话，会出现模糊的问题，因此也通过网上的查阅，统一整理一下多种解决方法，大概有两种方向，不多bb看代码~

一、不使用transform

模糊的原因跟 transform:translate(X,Y) 偏移有关系，我们就看看能否使用其他法子

法一：定位方式

translate偏移无非就是想居中定位（如果不是居中定位的话，那就没必要使用偏移了，直接通过top,left等定出你需要的位置），这种方式需要给定元素宽高，然后定位top,left,right,bottom四个值设为0在加上margin为auto即可~

 .popup-box{
	 position: fixed;
	 top: 0;
	 right: 0;
	 left: 0;
	 bottom: 0;
	 z-index: 999;
	 background-color: #fff;
	 width: 540px;
	 height: 20rem;
	 margin: auto;
 }

法二：css计算属性calc

如果对于垂直方向上的偏移没过多要求的话，直接使用百分比或者rem适应性单位定位即可，而水平方向一般都要求屏幕中间的话，可以在left值上使用计算属性，50%减去元素宽度的一半，因此这边需要给定元素一个宽度值

.popup-box{
  position: fixed;
  top: 25%;
  left: calc(50% - 260px);
  z-index: 999;
  width: 520px;
  padding: 46px 0 40px;
  background-color: #fff;
}

法三：给字体加多一个父级

原本字体的父级为列子中的popup-box，我们可以看到该父级是参与定位偏移的，所以才会影响到里面的字体，因此我们让字体套多一层父级即可

<div class="popup-box">
  <div class="popup-text">xxxx...</div>
</div>

.popup-box{
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 999;
  width: 520px;
  background-color: #fff;
  transform: translate(-50%,-50%);
}
.popup-text{
  display: flex;
  align-items: center;
}

二、仍使用transform

如果还是要用 transform：translate来偏移的话，那可以这样写：

法一：元素宽高值设为偶数

当字体的父级元素盒子宽高给定偶数时，此时是不会出现模糊的，若其一为奇数则出现模糊的情况

.popup-box{
   position: fixed;
   top: 50%;
   left: 50%;
   z-index: 999;
   width: 520px;
   height: 300px;
   padding: 46px 0 40px;
   background-color: #fff;
   transform: translate(-50%,-50%);
}

法二：给translate的Y值偏移设为绝对单位

直接给translate的Y轴偏移设为绝对单位，此时也是不会模糊的，此时不管你元素高度是奇数还是偶数

.popup-box{
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 999;
    width: 520px;
    /* height: 300px; */
    background-color: #fff;
    border-radius: 8px;
    padding: 46px 0 40px;
    transform: translate(-50%,-201px);
 }

我们可以搞个demo多试一试，会发现参与百分比translate偏移的轴，对应的元素宽/高得给个偶数值绝对单位，而如果当前元素宽/高不能为偶数时，对应的translate可以设置为绝对单位的偏移即可，亦或者不参与偏移；

元素宽(W)高(H)	translate偏移值
W：500px ；H: 500px	transform: translate(-50%,-50%)
W：501px ；H: 500px	transform: translate(-200px,-50%)
W：500px ；H: 501px	transform: translate(-50%,-200px)
W：501px ；H: 500px	transform: translateY(-50%)
W：500px ；H: 501px	transform: translateX(-50%)

---

好了，差不多整理了上面这几种方法，亲测有效，大伙也可以自己试一试，如果有其他好的方法可以交流沟通，如文中有出错之处，欢迎指出~