css: transform导致文字显示模糊

上网查了一下，好像是说和浏览器渲染有问题，transform里的值不能设置成基数，但我这里摆明就不是奇数：

解决办法

在使用 transform: translate3d(50%, 50%, 0) 时：

• 如果元素的高度可以固定，那么其值设置为偶数即可
• 如果元素的高度不可以固定，看看 translateY 是否可以设置为绝对单位(px)
• 如果上面两者都不行，可以使用 display: flex; align-items: center 来做，缺点是多了一层父元素
• 如果第三条方法也不行，可以尝试使用 display: table

参考文档

1. stackoverflow blurry-text-on-transformrotate-in-chrome