css: transform the characters appear blurred

Internet search a bit, as if to say, and browser rendering have a problem, transform where the value can not be set to the base, but I'm just being here is not odd:

Solution

In use  transform: translate3d(50%, 50%, 0) when:

• If the height of the element can be fixed, then the value is set to an even number
• If the height of the element can not be fixed, to see if translateY can be set to absolute units (px)
• If both of the above will not be used  display: flex; align-items: center to do, is a multi-layer disadvantage parent element
• If the third method does not work, you can try display: table

Reference Documents

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