translate

css——利⽤translate让元素居中

⽗元素：

position:relative;

居中元素：

position:absolute;

top:50%;//基于⽗元素

left:50%;//基于⽗元素

transform:translate(-50%,-50%);//基于⾃⾝

注意：此⽅法可能会导致像素模糊问题，因为CSS的transform：translate属性在作元素位移时，极有可能发⽣像素点⽆法对齐的情况。正常情况下，元素的边缘应该和像素点对齐，但

是经过CSStranslate后，计算的结果并⾮整数的像素点，导致本来⼀个像素能渲染的内容，没有完全归纳在其像素点内，如csstransform:translate(-50%,-50%)计算后的结果很可能是

transform:translate(100.5px,100.5px)，就因为0.5所以模糊。

解决⽅法：

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

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

2.使⽤flex