How do you center an element both horizontally and vertically?

Make the parent a flex or grid container and let it align the child. Three methods are common, and the first two are the usual choice today.

Flexbox centers on both axes: justify-content aligns along the main axis and align-items along the cross axis.

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

Grid centers with a single alignment declaration. place-items: center sets align-items and justify-items together.

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

Absolute positioning fits an element that must sit on top of other content, such as a modal. top and left move its top-left corner to the middle of the positioned parent, and translate pulls it back by half its own size.

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

Flexbox and grid center a child of any size and keep it in normal flow. The absolute method takes the element out of flow, and its parent needs a position other than static.