CSS — Align

The eternal question

"How do I center this?" has different answers per situation. Here's the complete decision table.

Centering text

h1        { text-align: center; }
p         { text-align: left; }   /* body text stays left! */

Only headings, labels and short lines get centered — justified/centered paragraphs are hard to read.

Centering a block element

Fixed-width boxes slide to the middle with auto margins:

.panel {
    width: 400px;
    margin: 0 auto;
}

(Leftover horizontal space splits equally on both sides.)

Works because the element is block-level and narrower than its parent. text-align: center would NOT work here — that centers inline content, not the box itself.

Centering inline content inside a box

.chip {
    text-align: center;
    line-height: 40px;      /* equal to height = vertical centering for one line */
    height: 40px;
}

The line-height trick: single-line labels vertically centered without flexbox.

Flexbox — the universal answer

.parent {
    display: flex;
    justify-content: center;   /* main axis   */
    align-items: center;       /* cross axis  */
}

Centers any content, any size, both axes:

<div class="hero">
    <div class="hero-card">Perfectly centered</div>
</div>

.hero {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

(The card floats exactly mid-screen regardless of its dimensions.)

This is THE pattern for hero sections, loading screens, empty states. Memorize it before any alternative.

Directional variants

.top-left     { align-items: flex-start; justify-content: flex-start; }
.bottom-right { align-items: flex-end;   justify-content: flex-end; }
.vertically-only { align-items: center; }

Grid — one-property centering

.parent {
    display: grid;
    place-items: center;    /* shorthand for align+justify */
}

Even terser than flex for pure centering.

Absolute positioning centering

When the element must float above others (modals):

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

top/left 50% puts the element's TOP-LEFT corner at center…
translate(-50%,-50%) shifts it back by half its OWN size → truly centered

Modern alternative without the math:

.modal {
    position: fixed;
    inset: 0;                       /* stretch over viewport */
    margin: auto;
    width: fit-content;
    height: fit-content;
}

Or simply flex a fixed overlay container — usually cleanest of all.

Vertical centering pitfalls

• vertical-align does NOT center divs — it's for table cells and inline neighbors only (classic misconception)
• Percentage heights need sized parents (height: 100% chains)
• Fixed-height + unknown-content = overflow; prefer flex/grid over magic numbers

Cheat sheet

Situation	Solution
Text in a heading	text-align: center
Box in a column	margin: 0 auto
Anything, both axes	flex justify+align-items: center
Pure centering, terse	grid place-items: center
Modal above page	fixed + inset/margin-auto or translate

Mini Practice

1. Center three ways: text, block-with-width, flex-hero
2. Build a loading spinner dead-center in 100vh
3. Make a modal overlay with inset:0 + place-items:center
4. Prove vertical-align fails on divs; then fix with flex
5. Combine all four cheat-sheet rows in one demo page

Next: combinators →