![Rachel Andrew](https://web.dev/images/authors/rachelandrew.jpg) Rachel Andrew Technical Writer [GitHub](https://github.com/rachelandrew) [LinkedIn](https://www.linkedin.com/in/rachelandrew) [Mastodon](https://front-end.social/@rachelandrew) [Bluesky](https://bsky.app/profile/rachelandrew.bsky.social) [Homepage](https://rachelandrew.co.uk)

<br />


Published: April 17, 2024

<br />

You can now use the `align-content` property from CSS Box Alignment
on block and table layouts. This will allow block direction alignment without
needing to create a flex or grid layout.

> [!TIP]
> **Celebration:** This web feature is now available in all three major browser engines, and becomes **Baseline Newly available** as of April 16, 2024.


The once impossible task of centering an item vertically was made easier by flexbox and grid,
along with the `align-content` property. However, it did involve creating a
flex or grid layout for no other reason than to do this alignment.
The property was specified for block layout, and in the past few months all
three major engines have shipped the feature.

With `align-content` available for block layout, you can achieve
vertical alignment without needing to create a flex or grid layout for the property to
work. No additional properties are needed as the item remains a block item, the
only change is to the alignment.
<iframe height="450" style="width: 100%;" scrolling="no" title="align-content: center in block layout" src="https://codepen.io/web-dot-dev/embed/abMxwzr?default-tab=js%2Ccss,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen &amp;amp;lt;a href="https://codepen.io/web-dot-dev/pen/abMxwzr"&amp;amp;gt; align-content: center in block layout&amp;amp;lt;/a&amp;amp;gt; by web.dev (&amp;amp;lt;a href="https://codepen.io/web-dot-dev"&amp;amp;gt;@web-dot-dev&amp;amp;lt;/a&amp;amp;gt;) on &amp;amp;lt;a href="https://codepen.io"&amp;amp;gt;CodePen&amp;amp;lt;/a&amp;amp;gt;. </iframe> The `align-content` property centers the heading vertically within a block container.