tl;dr: use place-content: center on a grid container.
.container {
display: grid;
place-content: center;
}
Here’s how that looks like:
That’s it. Two CSS rules.
Yes, four years late according to caniuse. But this is apparently still not well-known today.
Based on recent developments, looks like we just need a few more years
before we can finally get rid of the extra display rule so we can have the one CSS rule to center them all.