页面缩放时自定义Radio Button选中圆点位置偏移的修复咨询

你遇到的偏移问题，本质是百分比单位在页面缩放时的小数像素渲染误差。原代码用margin:20% auto来居中内部圆点，当父元素尺寸（20px）缩放后，计算出的margin值会出现非整数像素，浏览器对这类小数像素的取整处理会导致圆点偏移。下面是两种可靠的修复方案：

方案1：用Flex布局实现精准居中 #

通过给单选按钮容器添加Flex属性，直接让内部圆点自动居中，完全避免百分比计算的误差：

input[type="radio"] {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid gray;
  /* 新增Flex布局，强制子元素居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer; /* 可选，提升交互体验 */
}

input[type="radio"]:before {
  content: "";
  width: 60%;
  height: 60%;
  border-radius: 50%;
  /* 移除原有的margin:20% auto */
}

input[type="radio"]:checked:before {
  background: green;
}

input[type="radio"]:checked {
  border-color: green;
}

.role {
  margin-right: 80px;
  margin-left: 20px;
  font-weight: normal;
}

.roles {
  margin-bottom: 40px;
}

方案2：绝对定位+Transform居中 #

这种方式通过几何计算实现精准居中，同样不受百分比像素误差影响：

input[type="radio"] {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid gray;
  /* 设置相对定位作为子元素的定位参考 */
  position: relative;
  cursor: pointer;
}

input[type="radio"]:before {
  content: "";
  width: 60%;
  height: 60%;
  border-radius: 50%;
  /* 绝对定位+平移实现居中 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

input[type="radio"]:checked:before {
  background: green;
}

input[type="radio"]:checked {
  border-color: green;
}

.role {
  margin-right: 80px;
  margin-left: 20px;
  font-weight: normal;
}

.roles {
  margin-bottom: 40px;
}

效果说明 #

两种方案都是基于浏览器的原生几何居中逻辑，不会依赖百分比的像素计算，无论页面缩放多少比例，内部圆点都会始终保持在单选按钮的正中心，彻底解决偏移问题。

对应的HTML代码保持不变：

<div class="roles">
  <input type="radio" name="role" value="ONE" id="one" />
  <label class="role" for="one">ONE</label>
  <input type="radio" name="role" value="TWO" id="two" />
  <label class="role" for="two">TWO</label>
</div>

内容的提问来源于stack exchange，提问作者Sonny49