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%每個百分比嘗試）
   以上方法能較大程度優化問題，但仔細查看仍有細微抖動，最後用了第四種方法。