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

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

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

css3:

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

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

2. 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%每个百分比尝试）
   以上方法能较大程度优化问题，但仔细查看仍有细微抖动，最后用了第四种方法。