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. 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.