Centering in CSS
Centering stopped being a CSS puzzle a long time ago. When both axes should share the same alignment, Grid reduces the job to two declarations.
.container {
display: grid;
place-items: center;
} The container still needs a meaningful size. Use Flexbox when the surrounding layout is one-dimensional or the children need distribution as well as centering.