Centering label inside radio button - css

Question

I am struggling to center labels inside radio button with position:absolutes. The thing is that the labels are different (M, L , XL ) and my list renders with map. So my top/left values apply for each radio button in the same way.
Here is the li element:
{["M", "L", "XL"].map((size, index) => (
<li key={index}>
<label className={styles.sizeLabel}>
<input
type="radio"
value={size}
checked={size === selectedSize}
onChange={handleChange}
className={styles.radioButton}
key={size}
/>
<span className={styles.sizeText}>{size}</span>
</label>
</li>
))}
And here is my styling :
.sizeLabel span {
position: absolute;
left: 22%;
top: 5%;
font-size: 20px;
font-family: RobotoRegular;
font-style: normal;
font-weight: normal;
color: #272727;
overflow: hidden;
text-align: center;
}
Perhaps there is any better solution for how to make it better. This is how it shows right now, as you see it is not centered : https://prnt.sc/sz3ecl

Answer 1

I would suggest that you use flex, something like (inner span will be centered horizontally and vertically) :
.sizeLabel {
display: flex;
align-items: center;
justify-content: center;
}
.sizeLabel span {
font-size: 20px;
font-family: RobotoRegular;
font-style: normal;
font-weight: normal;
color: #272727;
overflow: hidden;
text-align: center;
}
Flex allows you to center elements, it will do the math for you based on the elements size and available space in parent element.
https://yoksel.github.io/flex-cheatsheet/

Answer 2

Trick to center something with position absolute is that you need to do 2 things:
set top and left of the element to 50%.
above step will center the top left corner of the element in the center of its parent element. To bring the element's center in the center of its parent element, you need to translate it by setting transform to translate(-50%, -50%)
ul {
list-style: none;
}
li {
margin: 20px 0 0 0;
}
label {
background: #f99;
padding: 10px;
width: 50px;
height: 50px;
display: flex;
position: relative;
border-radius: 50px;
}
label input {
opacity: 0;
}
label span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<ul>
<li>
<label>
<input type="radio" value="1" checked="true" />
<span>M</span>
</label>
</li>
<li>
<label>
<input type="radio" value="2" checked="true" />
<span>L</span>
</label>
</li>
<li>
<label>
<input type="radio" value="3" checked="true" />
<span>XL</span>
</label>
</li>
</ul>
You could also use flexbox for centering anything horizontally and vertically. In your case, you will need to set display: none on the input element for it to work.
ul {
list-style: none;
}
li {
margin: 20px 0 0 0;
}
label {
background: #f99;
padding: 10px;
width: 50px;
height: 50px;
display: flex;
border-radius: 50px;
align-items: center;
justify-content: center;
}
label input {
display: none;
}
<ul>
<li>
<label>
<input type="radio" value="1" checked="true" />
<span>M</span>
</label>
</li>
<li>
<label>
<input type="radio" value="2" checked="true" />
<span>L</span>
</label>
</li>
<li>
<label>
<input type="radio" value="3" checked="true" />
<span>XL</span>
</label>
</li>
</ul>