I am trying to create custom radio button, but after trying few centering methods I couldn't centre pseudo element. For some screen sizes, it works fine but sometimes it gets weird.
.custom-radio { display: none;}.custom-radio+label { position: relative; display: inline-block; width: 15px; height: 15px; border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 50%;}.custom-radio+label:after { content: ""; position: absolute; width: 11px; height: 11px; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); background: black; border-radius: 50%;}.custom-radio.flex+label { display: flex; align-items: center; justify-content: center;}<div class="input-wrapper"><input type="radio" id='custom-radio' class='custom-radio'><label for="custom-radio"></label></div><div class="input-wrapper"><input type="radio" id='custom-radio' class='custom-radio flex'><label for="custom-radio"></label></div>