css——利用translate让元素居中

参考：https://blog.csdn.net/qq_20264891/article/details/87873311

 

父元素：

position: relative;

 

居中元素：

position: absolute;
top: 50%; //基于父元素
left: 50%; //基于父元素
transform: translate(-50%, -50%); //基于自身

 

注意：此方法可能会导致像素模糊问题，因为CSS 的 transform： translate 属性在作元素位移时，极有可能发生像素点无法对齐的情况。正常情况下，元素的边缘应该和像素点对齐，但是经过 CSS translate 后，计算的结果并非整数的像素点，导致本来一个像素能渲染的内容，没有完全归纳在其像素点内，如css transform:translate(-50%,-50%) 计算后的结果很可能是 transform: translate( 100.5px, 100.5px)，就因为 0.5 所以模糊。

解决方法：

1. 在 transfrom 时，使用 calc 函数 加上0.5 px （减0.5px也可）

 

transform: translate(calc(-50% + 0.5 px), calc(-50% + 0.5 px));

 

2. 使用flex