Vertical Centering in a Block-Level Element

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.

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

  1. Temani Afif Temani Afif says:

    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/

Leave a Reply

Your email address will not be published. Required fields are marked *