Lowkey Hugo

Centering used to be the punchline of every CSS joke. Today it is a solved problem, with a handful of techniques that each fit a different situation. Here are the four I actually use.

1. Grid: the one-liner

When a container has a single child that should sit in the middle, Grid is the shortest answer:

.container {
  display: grid;
  place-items: center;
}

place-items sets both align-items and justify-items at once. It centers the child horizontally and vertically, whatever its size.

2. Flexbox: when there are siblings

Flexbox shines when several items share a row and you want the whole group centered:

.toolbar {
  display: flex;
  justify-content: center; /* along the row */
  align-items: center;     /* across the row */
  gap: 1rem;
}

3. Auto margins: centering a block of text

For an article or a card with a maximum width, automatic margins are still the simplest tool:

.article {
  max-width: 65ch;
  margin-inline: auto;
}

margin-inline sets the left and right margins in one go, and it respects right-to-left languages.

4. Absolute positioning: overlays

A badge on top of an image, or a spinner over a loading card, needs to leave the normal flow:

.overlay {
  position: absolute;
  inset: 0;
  margin: auto;
  width: fit-content;
  height: fit-content;
}

Which one should I use?