css transform导致像素模糊的问题解决办法

CSS居中模糊解决方案

最新推荐文章于 2025-05-09 16:16:48 发布

原创最新推荐文章于 2025-05-09 16:16:48 发布 · 5k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #html5

css 专栏收录该内容

7 篇文章

订阅专栏

本文探讨了使用CSS transform:translate(-50%,-50%)进行元素垂直居中时出现的模糊问题，分析了其背后的原因，并提供了三种解决方法：调整元素尺寸、采用Flex布局及精确translate值。

最近做项目做一个弹出框，然后垂直居中定位，发现很模糊，当时还可以是我屏幕问题，然后在同事上看也是一样模糊，然后发现是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));
}