"Centering used to be a CSS interview question. Now it's two lines."
The Two Verbs: Justify And Align
Flexbox has two alignment families, one per axis:
justify-*— acts on the main axis (the direction items flow).align-*— acts on the cross axis (perpendicular to main).
This is the consistent vocabulary: justify = along, align = across. It carries through to Grid, where the same prefixes mean the same things.
justify-content: Where Items Sit Along Main
How extra space along the main axis is distributed:
flex-start— items packed to the start of the main axis (default). Extra space at the end.flex-end— items packed to the end. Extra space at the start.center— items packed in the middle. Extra space split between the two ends.space-between— equal space between items; no space at the ends.space-around— equal space around each item; ends get half the inter-item space.space-evenly— equal space everywhere, including ends.
align-items: Where Items Sit Along Cross
How items align on the cross axis (within their line):
stretch— default. Items stretch to fill the cross axis.flex-start— items align to the start of the cross axis.flex-end— items align to the end.center— items centered on cross axis.baseline— items align by the baseline of their text. Useful when items have different font sizes and you want the text bottoms to line up.
Centering, In One Line Each
The famous "vertically center this" question, solved:
.container {
display: flex;
justify-content: center; /* horizontal center */
align-items: center; /* vertical center */
}Or, in Grid (even shorter): display: grid; place-items: center;.
align-self: Override For One Child
When most items should align one way but one needs to be different, align-self on the child overrides align-items on the parent:
align-content: For Multi-Line Flex
When flex-wrap: wrap creates multiple lines, align-content controls how those lines are distributed in the cross-axis space (similar to how justify-content distributes items in the main axis). It has the same values as justify-content: flex-start, center, space-between, etc.
Don't confuse align-content (lines) with align-items (items within a line). Both are cross-axis, but they operate at different levels.
The place-content Shorthand
place-content: center = align-content: center; justify-content: center;. place-items: center = align-items: center; justify-items: center; (Grid). place-self: center = align-self: center; justify-self: center; (Grid). Useful for terse code; readable code uses the longhand.
margin: auto As Alignment
A flex child with margin-left: auto consumes all available main-axis space on its left, pushing it to the right. This is how you create a navbar with a logo on the left and a menu on the right with no justify-content:
margin-right: auto does the opposite — pushes everything after it to the right. margin-top: auto on a column flex pushes it to the bottom. margin: auto centers in both axes (the source of the old "center with margin auto" pattern, now generalized).
margin: auto on that one item is cleaner than restructuring with justify-content: space-between and a wrapper.Common Patterns, Reduced
Pippa's Note
nav { display: flex; align-items: center; gap: 0.5rem; } with .actions { margin-left: auto }. One declaration on one element pushes the buttons to the right edge regardless of how many menu items appear in between. The Council's brain picker uses justify-content: space-between to spread four brain cards across the width — same vocabulary, different layout intent.