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