首先先上图,图片为工作项目图片,为了避嫌,打了个码。
如图所示,为了让文字在一个div中水平垂直都居中显示,用absolute定位和transform将文字放在了一个div的中间位置,
此时字号并不小,但字体边缘模糊。
这是因为transform时div的宽度或者高度并不是偶数,移动50%之后,像素点并不是整数,出了小数,和显示像素没有对上。
解决方案是使用flex完成垂直居中,设置排列方向为column,并设置justify-content: center,最后用text-align: center完成水平居中。方能保证文字显示清晰。