transform(50% 50%) 导致弹框发虚的问题

首先先上图，图片为工作项目图片，为了避嫌，打了个码。

如图所示，为了让文字在一个div中水平垂直都居中显示，用absolute定位和transform将文字放在了一个div的中间位置，

此时字号并不小，但字体边缘模糊。

这是因为transform时div的宽度或者高度并不是偶数，移动50%之后，像素点并不是整数，出了小数，和显示像素没有对上。

解决方案是使用flex完成垂直居中，设置排列方向为column，并设置justify-content: center，最后用text-align: center完成水平居中。方能保证文字显示清晰。

从别处转载。非原创。