Vertically Centering Things

The Second Hardest CSS Problem

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:

Vertical Centering Notes

Other Notes:

  1. border-radius might be helpful for making things circles.
  2. Note that the letter are spaced out (letter-spacing) and the font is all-caps.
    • Never type words in all caps for aesthetics reasons - always used text-transform.
    • What is text-transform, you ask? As usual, you should check on MDN.