Easy vertical alignment without flexbox


It is common to see display: flex applied to just about everything. The addition of flexbox to CSS made vertical alignment significantly easier. Until now, the align-content CSS property only worked with flexbox and CSS grid. Now that power has come to display: block. display: block is the default value of the ubiquitous <div> element. Its handy to be able to center things without the need to write any additional CSS to change this default value.

If all we need is vertical centering, instead of:

.some-div {
  display: flex;
  align-content: center;
}

we can use the slightly terser:

.some-div {
  align-content: center;
}

See the Pen align-content: center with display: block; by Ollie Williams (@cssgrid) on CodePen.

I’m a fan of keeping CSS as pruned and minimal as possible, so this is a nice addition to how layout works on the web.

align-content now also works for elements with a display of table-cell or list-item:

See the Pen Untitled by Ollie Williams (@cssgrid) on CodePen.

As of December 2023, this works in Safari Technology Preview and Chrome Canary.