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种方法。