Flexbox vs grid for centering?

Both work. Flex is ideal when you also distribute space along an axis; grid place-items:center is the shortest one-liner.

How do I center without flex or grid?

Use position absolute with top/left 50% and transform translate(-50%, -50%), or margin auto for horizontal only.

Check parent height, display type, and whether the child is inline. Inline elements need text-align:center on the parent.

The most common pattern for cards, heroes, and empty states.

Perfect center

Centered

justify-content and align-items center the child.

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

One property on the grid container centers all children.

Grid center

Centered

place-items: center is shorthand for align and justify.

.parent {
  display: grid;
  place-items: center;
  min-height: 12rem;
}

Works on block-level elements with a set width.

margin-inline: auto

Block centered

The block needs width less than 100%.

.card {
  width: min(20rem, 100%);
  margin-inline: auto;
}

Flexbox vs grid for centering?: Both work. Flex is ideal when you also distribute space along an axis; grid place-items:center is the shortest one-liner.
How do I center without flex or grid?: Use position absolute with top/left 50% and transform translate(-50%, -50%), or margin auto for horizontal only.
Why is my div not centering?: Check parent height, display type, and whether the child is inline. Inline elements need text-align:center on the parent.