Center anything

Flexbox is the shortest path to both-axis centering. `place-items: center` on a grid does the same in one line if the parent has a height.

#flexbox#grid#layout#centering

css

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

/* grid one-liner */
.parent-grid {
  display: grid;
  place-items: center;
  min-height: 100dvh;
}

Flexbox essentials

Flex works on one axis at a time. Set `flex-direction` first, then reason about `justify-content` (main axis) and `align-items` (cross axis). `gap` replaces margin hacks.

Grid essentials

Grid is two-dimensional. `repeat(auto-fit, minmax(...))` gives a responsive card layout without a single media query.

Center anything

Related

Flexbox essentials

Grid essentials