Vertical Centering in a Block-Level Element

December 28, 2023

Rachel Andrew, blowing my mind a bit:

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.
align-content in block layout

So now we can vertically center an element without having to reach for grid or flexbox.

Ollie Williams covered the news as well in Easy vertical alignment without flexbox, and also notes:

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

Wanna learn modern CSS layout?

Laying out designs on the web with CSS has gotten a lot more powerful in recent years. CSS grid and flexbox are incredibly powerful tools for that, and we have a complete learning course on them from Jen Kramer.

One response to “Vertical Centering in a Block-Level Element”

Temani Afif says:

March 11, 2024 at 6:09 am

I would like to point out a small gotcha we may face if we try to use this with images and similar elements: https://css-tip.com/align-content-center/

Reply

Author

Chris Coyier

CodePen

I’m a web designer and developer and my career arc is about helping you get better at those things. Sometimes people talk to me about that. With Alex Vazquez, I’m the co-founder of CodePen, a social front-end web development environment. With Dave Rupert, I’m the co-host of a podcast called ShopTalk. I built CSS-Tricks, a website all about building websites, and ran it for 15 years, from 2007 to 2022. I’m big on the power of writing as a way to think better and improve yourself.