Custom radio button cannot center pseudo element - html

Question

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>

Answer 1

Actually the issue is your label width and height...its 15px which is odd which preventing to calculate the top:50% and left:50% value from the parent...Try to do it 16px, it will work fine..
.custom-radio {
display: none;
}
.custom-radio+label {
position: relative;
display: inline-block;
width: 16px;
height: 16px;
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: translate(-50%, -50%);
background: black;
border-radius: 50%;
}
<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'>
<label for="custom-radio"></label>
</div>
Well if you don't want to change the width and height of label use Flexbox display:flex in label and margin:auto in :after to align it center vertically and horizontally...
.custom-radio {
display: none;
}
.custom-radio+label {
position: relative;
width: 15px;
height: 15px;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 50%;
display: flex;
}
.custom-radio+label:after {
content: "";
width: 11px;
height: 11px;
background: black;
border-radius: 50%;
margin: auto;
}
<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'>
<label for="custom-radio"></label>
</div>