设置transform导致弹窗字体模糊问题

说明

• 项目中，设置弹出框居中的时候遇到字体变模糊的情况，查阅资料后发现是transform的问题，下面具体看看：

  原因

• 项目中弹出框的样式居中是这样写的：

  .box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  

• 比如盒子的宽度为300px，高度为401.5px，这样transform计算出的50%是150px，和200.75px，这种情况下就会出现了字体模糊的现象

• 后来看网上也是说到如果宽度和高度为奇数，translate为百分比，计算出为小数的时候会出现字体模糊的现象

  解决

• 将盒子的高度或者宽度改为偶数可以解决此问题