How do you center an element both horizontally and vertically using Flexbox?

Make the wrapper a flex container, then set justify-content: center and align-items: center — and give it a height so there's room to center within.

Centering on both axes used to be one of CSS's most notorious annoyances. Flexbox makes it almost trivial: justify-content centers along the main axis (horizontal in a default row) and align-items centers along the cross axis (vertical).

.container {
  display: flex;
  justify-content: center;  /* horizontal centering */
  align-items: center;      /* vertical centering */
  height: 100vh;            /* must have height to center within! */
}

The height matters: with no height, the container collapses to fit its content and there's nothing to center inside. 100vh means "full viewport height," a common choice for a centered splash screen.

Grid does it even more tersely with the place-items shorthand, which sets both align-items and justify-items at once:

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

Go deeper:

• MDN — CSS numeric data types (viewport units) — what vh/vw mean and the newer dvh/svh/lvh variants for mobile.