place-content controls how a grid or flex container aligns and distributes its content along its axes. In a custom radio button or checkbox, setting place-content: center centers the inner disk or check mark inside the input. section 10.3.3 section 10.3.5
Center a custom control’s inner box
Apply inline-grid to the input, then center its generated child with place-content: input[type="radio"], input[type="checkbox"] { width: 1.75em; height: 1.75em; display: inline-grid; place-content: center; } The input remains inline with its label while grid centers the smaller ::before box. section 10.3.3 section 10.3.5
Listing 10.10 Centering the inner box
:where(input[type="radio"], input[type="checkbox"])::before {
display: block;
content: '';
width: 1em;
height: 1em;
}
Inspect the generated inner box used with place-content: center; its block display and em-sized dimensions make the centered element visible once styled. section 10.3.5
