Html 自定义单选按钮无法将伪元素居中

我试图创建自定义单选按钮，但在尝试了几种居中方法后，我无法将伪元素居中。对于某些屏幕尺寸，它工作正常，但有时会变得怪异

。自定义收音机{
显示：无；
}
.定制收音机+标签{
位置：相对位置；
显示：内联块；
宽度：15px；
高度：15px；
边框：1px实心rgba（0,0,0,0.3）；
边界半径：50%；
}
.自定义收音机+标签：之后{
内容：“；
位置：绝对位置；
宽度：11px；
高度：11px；
最高：50%；
左：50%；
转换：translate3d（-50%，-50%，0）；
背景：黑色；
边界半径：50%；
}
.定制收音机.flex+标签{
显示器：flex；
对齐项目：居中；
证明内容：中心；
}

---

事实上，问题在于你的

标签的宽度和高度……它的
15px
很奇怪，这妨碍了从父项计算
顶部：50%
和
左侧：50%
值……试着这样做
16px
，它会工作正常


。自定义收音机{
显示：无；
}
.定制收音机+标签{
位置：相对位置；
显示：内联块；
宽度：16px；
高度：16px；
边框：1px实心rgba（0,0,0,0.3）；
边界半径：50%；
}
.自定义收音机+标签：之后{
内容：“；
位置：绝对位置；
宽度：11px；
高度：11px；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
背景：黑色；
边界半径：50%；
}