当前位置: 代码迷 >> 综合 >> transform:translate (-50%,-50%) 造成的文字模糊和解决方案
  详细解决方案

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

热度:50   发布时间:2023-12-20 10:59:24.0

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

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

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




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

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

  相关解决方案