![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 />

From Chrome 123 you can 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. However, you might need to update your
CSS if you have used `align-content` outside of these layout methods as it will
now take effect.


## `align-content` in flex and grid layouts

You have probably used `align-content` to align flex items or grid tracks. In a
flex layout, the `align-content` property is used on the flex container to align
the flex items on the cross axis. In the following example, it has a value of
`space-between` so it is distributing the available space in the flex container
between the flex rows.
<iframe height="500" style="width: 100%;" scrolling="no" title="align-content in a flex layout" src="https://codepen.io/web-dot-dev/embed/mdogmxy?default-tab=js%2Ccss,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/web-dot-dev/pen/mdogmxy">
align-content in a flex layout</a> by web.dev (<a href="https://codepen.io/web-dot-dev">@web-dot-dev</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe> The `align-content` property spaces out the rows of flex items, due to the flex container having spare space in the cross axis.

## Center an item vertically

Where `align-content` is particularly useful is in centering an item vertically
within a container. To achieve this, use `display: flex` along with
`align-content: center`. This causes the item to become a flex item, and other
default flex item behavior also takes effect. In the following example the
heading is centered vertically with `align-content: center`, this causes the
item to shrink to fit the content, and therefore you need to apply `flex-grow: 1`
to the item.
<iframe height="450" style="width: 100%;" scrolling="no" title="align-content: center in flex layout" src="https://codepen.io/web-dot-dev/embed/XWGQgKG?default-tab=js%2Ccss,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/web-dot-dev/pen/XWGQgKG">
align-content: center in flex layout</a> by web.dev (<a href="https://codepen.io/web-dot-dev">@web-dot-dev</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe> The `align-content` property centers the heading vertically within a flex container.

With `align-content` available for block layout, you will be able to achieve
vertical alignment without needing to create a flex 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 <a href="https://codepen.io/web-dot-dev/pen/abMxwzr">
align-content: center in block layout</a> by web.dev (<a href="https://codepen.io/web-dot-dev">@web-dot-dev</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe> The `align-content` property centers the heading vertically within a block container (needs Chrome 123 or Safari 17.4 or greater).

## Test for support of `align-content` in block layouts

Unfortunately, it's not possible to test for support of `align-content` in block
layout. As `align-content` has been supported for a long time in flex and grid
layout, using feature queries with `@supports` will always return true. This is
the same situation that happened with the `gap` property in flexbox. The CSS Working
Group is [exploring a solution for partial implementations like
this](https://github.com/w3c/csswg-drafts/issues/3559#issuecomment-1885332213).

## Check your sites for unexpected alignment

The `align-content` property has been defined for many years [in the
specification](https://drafts.csswg.org/css-align/#align-justify-content) as
working on block layouts. As no browser supported `align-content` outside of
these contexts, it did nothing. However, if you have added the property to
something that is not a flex or grid container, it will start to have an effect
as of Chrome 123. Search your CSS for use of `align-content` and use the beta to
test your sites and applications if this might be the case for you.