Want a card to sit in the middle of the page? Make its parent a flex container, then put `align-items: center` on that parent to center the card vertically. Use `justify-content: center` alongside it to center the card horizontally. section 6.4
Listing 6.5 Centering the card
body {
...
display: flex;
justify-content: center; #1
align-items: center; #2
}
The `body` rule shows both declarations on the parent of the card: `align-items` handles vertical alignment here, while `justify-content` handles horizontal positioning. section 6.4
`align-items` also works when you do not want centering. Flex items stretch by default, which can make items of different heights match the tallest one. On a credit card’s top row, `align-items: flex-start` keeps their tops aligned instead. section 9.2.2
A few small layouts show where the declaration belongs:
- For a grid-based summary card, `align-items: center` helps center the paragraph within its middle row. Removing the heading’s bottom margin keeps the surrounding whitespace balanced. section 5.4.2
- For a fixed-height security-code band, `align-items: center` centers the text vertically; `justify-content: flex-end` keeps it on the right. section 9.2.3
- For a share button, `align-items: center` aligns its icon and text vertically, while `gap` adds space between them. section 11.5.1
