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

原因
项目中弹出框的样式居中是这样写的：
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
1
2
3
4
5
6
比如盒子的宽度为300px，高度为401.5px，这样transform计算出的50%是150px，和200.75px，这种情况下就会出现了字体模糊的现象
后来看网上也是说到如果宽度和高度为奇数，translate为百分比，计算出为小数的时候会出现字体模糊的现象
解决
将盒子的高度或者宽度改为偶数可以解决此问题