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 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:
we can use the slightly terser:
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
As of December 2023, this works in Safari Technology Preview and Chrome Canary.