小屏幕下CSS按钮选择器内部元素无法居中的解决方法求助

针对小屏幕下圆形按钮内部元素偏移的问题，推荐两种可靠的修复方案，核心是让浏览器统一处理居中逻辑，避免小数像素舍入带来的误差：

方案一：父元素使用Flex布局直接居中伪元素 #

修改CSS代码如下：

.selectorButton {
    border-radius: 50%;
    background-color: v-bind(primaryColor);
    width: clamp(14px, 1.1vw, 30px);
    aspect-ratio: 1/1;
    margin: 5px;
    transition: 0.6s;
    position: relative;
    /* 启用Flex布局，直接控制内部元素居中 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.selectorButton::before {
    content: '';
    border-radius: inherit;
    width: clamp(12px, 0.9vw, 25px);
    aspect-ratio: 1/1;
    position: relative;
    background: #11181e;
    box-shadow: inset 5px 5px 10px #070a0c,
                inset -5px -5px 10px #1b2630;
    transition: 0.6s;
}

方案二：绝对定位+inset+margin:auto #

如果需要保持伪元素的绝对定位，可改用这种方式：

.selectorButton {
    border-radius: 50%;
    background-color: v-bind(primaryColor);
    width: clamp(14px, 1.1vw, 30px);
    aspect-ratio: 1/1;
    margin: 5px;
    transition: 0.6s;
    position: relative;
}

.selectorButton::before {
    content: '';
    border-radius: inherit;
    width: clamp(12px, 0.9vw, 25px);
    aspect-ratio: 1/1;
    position: absolute;
    /* 让伪元素填满父元素的可用空间 */
    inset: 0;
    /* 自动水平+垂直居中 */
    margin: auto;
    background: #11181e;
    box-shadow: inset 5px 5px 10px #070a0c,
                inset -5px -5px 10px #1b2630;
    transition: 0.6s;
}

问题根源解释 #

你遇到的偏移是小数像素舍入误差导致的：使用vw单位结合clamp时，父元素和伪元素的尺寸可能会生成非整数像素值。原来的left:50% + transform:translate(-50%,-50%)方式，会分别计算父元素半宽、伪元素半宽两个小数，浏览器对这两个值分别舍入后叠加，就会出现随机的偏移。而上述两种方案都是让浏览器一次性计算居中位置，能更智能地处理小数像素的渲染，避免偏移问题。

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