css transform導致像素模糊的問題解決辦法

最近做項目做一個彈出框，然後垂直居中定位，發現很模糊，當時還可以是我屏幕問題，然後在同事上看也是一樣模糊，然後發現是CSS的transform: translate(-50%,-50%)導致的，英文這種垂直居中會出現小數點像素，像素是基數的時候就會糊掉，偶數的時候不會！其實原理很簡單：元素的邊緣應該和像素點對齊，但是經過 CSS translate 後，計算的結果並非整數的像素點，導致本來一個像素能渲染的內容，沒有完全歸納在其像素點內，導致出現模糊的情況!

方法1：

如果是固定的寬高，你可以把寬高各加0.5或者1px,讓它變成偶數就不會模糊！

方法2：

在父元素上改成flex佈局，讓他水平垂直居中，這種方法簡單粗暴（推薦！）

.ngdialog.ngdialog-theme-default {
    padding-bottom: 0;
    padding-top: 0;
    display: flex;
    justify-content: center;//水平居中
    align-items: center;//垂直居中
}

方法3：

在translate XY方法各加0.5px,用calc函數去計算！

.ngdialog.ngdialog-theme-default .ngdialog-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transfrom:translate(calc(-50% + 0.5px),calc(-50% + 0.5px));
}