Up to date
Published
2 min read

Trevor I. Lasn

Staff Software Engineer, Engineering Manager

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

Finally, we can center things in block layouts without flexbox gymnastics

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.

display: flex

Centers with flex

justify-content: center
display: grid

Centers with grid

align-content: center
display: block

Centers with block

align-content: center

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.


Found this article helpful? You might enjoy my free newsletter. I share dev tips and insights to help you grow your coding skills and advance your tech career.

Interested in supporting this blog in exchange for a shoutout? Get in touch.


Liked this post?

Check out these related articles that might be useful for you. They cover similar topics and provide additional insights.

Webdev
4 min read

HTTP CONNECT: Building Secure Tunnels Through Proxies

Understand how HTTP CONNECT enables HTTPS traffic through proxies

Nov 28, 2024
Read article
Webdev
3 min read

The HTML Native Search Element

The search HTML element is a container that represents the parts of the web page with search functionality

Dec 2, 2024
Read article
Webdev
4 min read

Mental Toughness is the Best Quality a Developer Can Have

Mental toughness gets developers through challenges like debugging, picking up new tools, and hitting tight deadlines. It’s about staying calm and pushing through when things get tough.

Sep 12, 2024
Read article
Webdev
4 min read

LH and RLH: The CSS Units That Make Vertical Spacing Easy

Exploring new CSS line-height units that eliminate guesswork from vertical rhythm

Dec 3, 2024
Read article
Webdev
3 min read

scrollbar-width & scrollbar-gutter: CSS Properties for Layout Control

Prevent content shifts and refine scrollable UIs with scrollbar-width and scrollbar-gutter

Dec 19, 2024
Read article
Webdev
4 min read

Explicit is better than implicit

Clarity is key: being explicit makes your code more readable and maintainable.

Sep 4, 2024
Read article
Webdev
4 min read

The What, Why, and How of Using a Skeleton Loading Screen

Skeleton loading screens enhance user experience and make your app feel faster

Nov 12, 2020
Read article
Webdev
4 min read

Understanding Vue's Suspense

How the Suspense component manages async dependencies and improves loading states in Vue apps

Aug 23, 2024
Read article
Webdev
13 min read

10 Essential Terminal Commands Every Developer Should Know

List of useful Unix terminal commands to boost your productivity. Here are some of my favorites.

Aug 21, 2024
Read article

This article was originally published on https://www.trevorlasn.com/blog/css-align-content-in-block-layouts. It was written by a human and polished using grammar tools for clarity.