如何正确居中单选按钮的选中圆点？

嘿，我来帮你搞定这个单选按钮圆点居中的问题～

首先得说你现在遇到的问题根源：你用了transform: translate(0.1rem,0.1rem)这种固定像素的偏移来挪圆点，这属于“硬编码”写法——一旦你调整了按钮或者圆点的尺寸，这个固定偏移就会失效，甚至不同浏览器的细微渲染差异都可能让圆点歪掉。另外我注意到你代码里checked伪类里的opacity好像没写完，应该是要设为1才会显示对吧？

下面给你两种靠谱的解决方案，选哪种看你习惯：

方案一：优化绝对定位写法（适配你的原有思路） #

把固定偏移换成基于百分比的居中逻辑，不管元素尺寸怎么变，圆点都能精准居中：

/* 优化后的absolute定位写法 */
input[type="radio"]#id2{
    appearance: none;
    position: relative;
    border-radius: 50%;
    height: 1.6rem;
    width: 1.6rem;
    cursor: pointer;
    border:2px solid rgb(18, 141, 223);
    /* 加上这个，让边框宽度算在元素总尺寸内，避免尺寸溢出 */
    box-sizing: border-box;
}

input[type="radio"]#id2::after{
    position: absolute;
    /* 先把伪元素的左上角定位到父元素中心 */
    top: 50%;
    left: 50%;
    /* 再把伪元素往左上挪自身尺寸的50%，刚好居中 */
    transform: translate(-50%, -50%);
    content:"";
    opacity: 0;
    border-radius: 50%;
    height: 1.2rem;
    width: 1.2rem;
    background: rgb(18, 141, 223);
    cursor: pointer;
}

input[type="radio"]#id2:checked::after{
    opacity: 1;
}

方案二：用Grid布局（更简洁省心） #

如果不想折腾定位偏移，直接用现代CSS的Grid布局，浏览器会自动帮你居中元素，代码更干净：

/* Grid布局写法，无需手动计算偏移 */
input[type="radio"]#id2{
    appearance: none;
    display: grid;
    place-self: center;
    border-radius: 50%;
    height: 1.6rem;
    width: 1.6rem;
    cursor: pointer;
    border:2px solid rgb(18, 141, 223);
    box-sizing: border-box;
}

input[type="radio"]#id2::after{
    content:"";
    opacity: 0;
    border-radius: 50%;
    height: 1.2rem;
    width: 1.2rem;
    background: rgb(18, 141, 223);
    cursor: pointer;
}

input[type="radio"]#id2:checked::after{
    opacity: 1;
}

简单说下为什么Grid更推荐：它不用你手动计算任何偏移量，浏览器原生支持居中逻辑，兼容性也覆盖了所有主流浏览器，后期维护起来也更省心——哪天你要改按钮尺寸，直接改height和width就行，完全不用管居中的事。

备注：内容来源于stack exchange，提问作者Mehdi