The Centering Problem — CSS's most-Googled question

Center Text and Inline Content — text-align

.box {
    text-align: center;
}

For centering TEXT (and other inline content like images or buttons) inside a container, text-align: center is the tool — you met it in the text chapter. Remember the key limitation: it centers the CONTENT inside the box, not the box itself. If you just want words centered in a heading or paragraph, this is all you need. For centering the box itself, read on.

Center a Block Horizontally — margin auto

.box {
    width: 300px;
    margin: 0 auto;    /* top/bottom 0, left/right AUTO */
}

Center Anything — flexbox (the modern way)

.container {
    display: flex;
    justify-content: center;   /* horizontal centering */
    align-items: center;       /* vertical centering */
    height: 300px;
}

Vertical Centering — why it used to be hard

For years, vertical centering was CSS's biggest headache — text-align and margin auto only handle horizontal, and old tricks were ugly. Flexbox changed everything: align-items: center centers vertically in one line. That's why the flexbox method above is now the go-to for true center-of-the-screen content (login boxes, hero text, modals). If you only remember one centering method, remember the flexbox trio: display: flex; justify-content: center; align-items: center;.

Exam Corner