align-content in block layout
Despite what you might read in some corners of the internet, it's been possible to vertically centre an element inside a parent for a very long time now. The align-content property from the Box Alignment spec does the job, however browsers require that you make the parent element either a flex or a grid layout....
espite what you might read in some corners of the internet, it’s been possible to vertically centre an element inside a parent for a very long time now. The align-content property from the Box Alignment spec does the job, however browsers require that you make the parent element either a flex or a grid layout. While the property was specified to work in block layout, no browser had implemented it, until now.
Chrome 122 implements align-content for block containers, and it’s being implemented in WebKit too. If you view the following CodePen in Chrome 122 (Canary at the time of writing) you’ll see that the text is vertically centred—no display: flex required.
See the Pen align-content in block layout (Chrome 122) by Rachel Andrew (@rachelandrew) on CodePen.
Did you enjoy this article?
Recommend it — Standard Reader surfaces well-loved writing to more readers across the network.