浏览器缩放时嵌套居中div渲染尺寸与设定值不符问题

这是浏览器的正常渲染行为，不属于代码bug。

当页面缩放比例不是100%时，浏览器需要将你写的CSS逻辑像素值换算为实际屏幕的物理像素值进行渲染，这个换算过程涉及浮点运算，受设备像素比、缩放比例的精度限制，必然会出现亚像素级的数值偏差，你观察到的49.992px这类非整数尺寸就是浮点计算截断后的正常结果，该现象在Chrome、Firefox等所有主流浏览器中都存在，无法完全消除。

这类偏差在普通块级布局中几乎不会被感知，但在圆形嵌套、细边框、居中对齐这类对像素精度敏感的场景下，可能会出现肉眼可见的边缘错位、粗细不均问题。

你可以根据实际场景选择以下方案降低偏差带来的视觉影响：

• 优先使用transform实现居中，替换flex+margin的居中逻辑
  transform属性的亚像素渲染精度高于普通盒模型偏移，能大幅降低圆形嵌套时的边缘错位感，修改后的代码如下：

.outer {
  position: relative;
  width: 100px;
  height: 100px;
  background: #7154d4;
  border-radius: 50%;
}

.inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #ff00ff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

对应的HTML结构不需要修改：

<div class="outer">
  <div class="inner"></div>
</div>

• 高要求场景下适配像素值
  如果是对视觉精度要求极高的场景（比如设计系统的图标组件），可以根据目标用户的设备像素比，选择换算后更容易得到整物理像素的尺寸值，比如为DPR=2的屏幕设置偶数宽高，不过该方案适配成本较高，普通业务场景不推荐使用。
• 无感知场景无需处理
  0.01px级别的尺寸偏差在绝大多数业务场景下不会被用户察觉，不需要特意做兼容处理。

问题复现的尺寸偏差参考：

页面实际渲染效果参考：

内容的提问来源于stack exchange，提问作者Mareș Ștefan