Vue: Как разместить радиокнопку в центре метки

Question

Как разместить радиокнопку в центре по вертикали? Сейчас я использовал top: 50 %, но он не выравнивается по центру. В любом случае я не жестко кодирую высоту правого div, я использую sh, чтобы использовать функцию cal c, чтобы дать максимальное значение, но высота правого div всегда динамически c. Есть ли способ получить высоту?

                <b-tabs>
                    <b-tab>
                        <b-form-radio-group>
                            <b-form-radio>
                                <div>Lorem .....</div>
                            </b-form-radio>
                        </b-form-radio-group>
                    </b-tab>
                </b-tabs>
                .custom-control-label {
                  &:before {
                    background: $white;
                    border: 2px solid #b7b9bc;
                    border-radius: 100%;
                    cursor: pointer;
                    top: 50%;
                   }
                   &:after {
                    top: 50%;
                   }
                }

Answer 1

top: 50%;
transform:translateY(-50%)

Answer 2

Радиокнопка имела высоту 16 пикселей. Таким образом, я дал высшее право: after и: before, как это, что решило проблему.

    .custom-control-label {
        &:before {
            background: $white;
            border: 2px solid #b7b9bc;
            border-radius: 100%;
            cursor: pointer;
            top: calc((100% - 16px)/2);
        }
        &:after {
            top: calc((100% - 16px)/2);
        }
    }

Answer 3

Используйте:

top: 50%;
transform:translateY(-100%)

Вы выравниваете центр элемента по верхней 50% начальной точке, поэтому вам нужно переместить его -100% собственной высоты, чтобы центрировать его.