Centering a div in a div in 2020

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.