Vertical Centering with CSS

Vertical centering with CSS has been easy for a couple of years now. Both flexible box layout and grid layout support it. Just use them together with the align-content property.

div {
  display: grid; /* or flex */
  align-content: center;
}

And it is about to become even simpler. The specification of the align-content property was not limited to flexbox and grid layout, but it also included block containers. No browser supported that so far, though. But that is about to change as Firefox 125, Safari 17.4, and Chrome 123 (will) support it. Supporting browsers will vertically center even without defining a display property.

div {
  align-content: center;
}

For backward compatibility (and as feature detecting this particular behaviour is currently not possible in a sensible way), it is still recommended to only use it together with flex or grid for the foreseeable future.