align-content: The Simplest Way to Center Content with CSS

Block layouts have been part of CSS since the beginning, but they’ve always lacked proper alignment controls. Now, with align-content support in block layouts, we can distribute content vertically with the same flexibility we’ve enjoyed in flex and grid.

The old approaches required either flexbox or grid as a workaround. With flex, we needed multiple properties to achieve vertical centering. Grid made it a bit simpler with align-content, but still required changing the layout mode.

With the new align-content support in block layouts, we can achieve the same result while maintaining block layout semantics. No need to switch layout modes - just add align-content to your block container.

The browser will distribute the available space automatically, positioning your content in the center of the container. This works with any block container that has a defined block size.

Browser Support and Fallbacks

This feature requires browsers that support the latest CSS Box Alignment specification. For older browsers, you can use either the flex or grid approach as a fallback.

The safest approach is to use @supports to provide a fallback for browsers that don’t support align-content in block layouts. This way, you can ensure a consistent experience across all browsers.