margin:0 auto will center a block horizontally, because auto means equal space on each side.
But margin: auto auto has no extra effect, because the automatic top/bottom margin is 0.
Why? Is the W3C on drugs? Well, maybe. The bigger issue is CSS was originally designed for relatively simple documents, and we keep pushing its limits.
There are a few curve-balls here:
transform gives us a way
to hack around it.position: absolute; left: 50% to move the left edge on an object halfway across its container. However, this means its left edge is aligned to the center, and we need the center aligned to the center.transform (read about it on MDN) moves things around relative to themselves, no their container. so transform: translateX(50%) will slide an element over by half its width.position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) will:border-radius might be helpful for making things circles.letter-spacing) and the font is all-caps.text-transform.text-transform, you ask? As usual, you should check on MDN.