求助：自定义单选按钮伪元素无法居中，不同屏幕表现异常

我看你遇到了自定义单选按钮伪元素在不同屏幕尺寸下居中异常的问题，这大概率是因为代码里的transform属性不完整，再加上容器尺寸计算的细节没处理好导致的。咱们来一步步修复：

问题分析 #

你的原代码里transform: translate3d(-明显是未完成的写法，而且缺少了单选按钮选中状态的触发逻辑，另外容器的边框可能会干扰尺寸计算，这些都会导致在部分屏幕下出现居中偏移。

修正后的完整代码 #

/* 隐藏原生单选按钮 */
.custom-radio {
  display: none;
}

/* 自定义单选按钮容器 */
.custom-radio + label {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  cursor: pointer; /* 提升交互体验，提示可点击 */
  box-sizing: border-box; /* 让边框包含在容器尺寸内，避免实际尺寸变大 */
}

/* 选中状态的填充圆点 */
.custom-radio:checked + label:after {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 基于自身尺寸居中，兼容性和可靠性更好 */
  border-radius: 50%;
  background-color: #000; /* 可替换为你需要的选中颜色 */
}

关键修复点说明 #

• 补全居中逻辑：transform: translate(-50%, -50%)是绝对定位元素居中的标准方案，它会将伪元素的中心点与容器的中心点精准对齐，比margin负边距更适配不同屏幕的渲染规则。
• 容器尺寸校准：添加box-sizing: border-box后，容器的1px边框会被包含在15px的宽高内，不会导致容器实际尺寸超出设定值，避免居中计算出现偏差。
• 完善选中状态：通过:checked伪类控制伪元素的显示，确保只有当单选按钮被选中时才显示填充圆点，符合单选按钮的交互逻辑。
• 细节优化：加上cursor: pointer让用户明确知道这是可交互元素，提升使用体验。

如果在高DPI屏幕下仍有细微偏移，可以尝试将伪元素的尺寸调整为偶数（比如10px），或者使用transform: translate3d(-50%, -50%, 0)开启硬件加速，进一步提升渲染稳定性。

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