transform:translate (-50%,-50%) 造成的文字模糊和解決方案

首先先上圖，圖片爲工作項目圖片，爲了避嫌，打了個碼。

如圖所示，爲了讓文字在一個div中水平垂直都居中顯示，用absolute定位和transform將文字放在了一個div的中間位置，

此時字號並不小，但字體邊緣模糊。

這是因爲transform時div的寬度或者高度並不是偶數，移動50%之後，像素點並不是整數，出了小數，和顯示像素沒有對上。

解決方案是使用flex完成垂直居中，設置排列方向爲column，並設置justify-content: center，最後用text-align: center完成水平居中。方能保證文字顯示清晰。