Как вертикально расположить элемент внутри относительного родителя [дубликат] ⇐ CSS

[Anonymous]

Я работаю над тумблером и хочу, чтобы ручка тумблера располагалась внутри переключателя строго вертикально. Вот как я пытался этого добиться:
импортировать стиль из "./Toggle.module.scss";

Код: Выделить всё

export default function Toggle() {
return (




);
}

.toggle {
height: 0;
width: 0;
opacity: 0;
}

.label {
width:60px;
height: 30px;
border-radius:30px;
display: block;
background-color: #ebebeb;
box-shadow: 1px 2px 5px 1px rgba(0,0,0,0.2) inset;
left:10px;
padding-left: 5px;
position: relative;

&::after {
content: '';
position: absolute;
width: 23px;
height: 23px;
border-radius: 50px;
background-color: green;
top: 50%;
transition: 0.3s;

}
}

.toggle:checked ~ .label::after{
transform: translateX(32px);

}

Я хочу, чтобы свойство ::after было абсолютно позиционировано относительно метки. Поэтому, когда я делаю верхние 50%, я ожидаю, что это будет идеально отцентрировано.
Но вместо этого оно выходит за пределы, см. изображение:


Вопрос в том, почему это работает без относительной позиции лучше, чем с относительной ?
Я пробовал добавить родственник в сочетании с

Код: Выделить всё

transform: translateY(-50%);

Но при нажатии он совершает диагональное движение:

Подробнее здесь: https://stackoverflow.com/questions/784 ... ive-parent