Center a div

Flexbox (recommended)

The most common approach. Works for centering one child or several.

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

justify-content centers on the main axis (horizontal by default), align-items centers on the cross axis (vertical).

Grid

Shorter if you only need to center a single child.

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

Absolute positioning + transform

Useful when the parent can’t become a flex/grid container.

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Requires the parent to have position: relative (or another positioning context).

Browser support

All three methods work in every browser still in general use — Chrome, Firefox, Safari, Edge.