position和transform使元素居中的方法 (转载)

一、position & transform: translate(-50%, -50%) 实现块元素百分比居中
css3:

 .parent {
   positioin: relative;
 }
 .child {
   positioin: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }

页面宽高正常显示和页面宽高缩放显示时,都保持,上下左右居中显示

二、 transform:translate (-50%,-50%) 造成的文字模糊和解决方案
这是因为transform时div的宽度或者高度并不是偶数,移动50%之后,像素点并不是整数,出了小数,和显示像素没有对上。
解决方案是使用flex完成垂直居中,设置排列方向为column,并设置justify-content: center,最后用text-align: center完成水平居中。方能保证文字显示清晰。

优化方法:

  1. 将transform: translate(-50%, -50%)改成transform: translate3d(-50%, -50%, 0)可以解决抖动,但仍然模糊。

  2. 将元素的高度设置为偶数可解决;

  3. 将transform: translate(-50%, -50%)中的y轴单位改成px也可以解决

  4. 改成transform: translate(-50%, -52%)也可以解决(如果52%不行则从51%每个百分比尝试)

    以上方法能较大程度优化问题,但仔细查看仍有细微抖动,最后用了第4种方法。

上一篇:SQL语句中的REGEXP'[^abc]'


下一篇:在 Oracle 中使用正则表达式