Centering is Finished

How many collective human hours have been sacrificed at the altar of the vertical centering gods?

For decades, getting a box to sit in the middle of another box was the "Hello World" of CSS trauma. We’ve cycled through vertical-align: middle (which only worked for tables or inline-blocks), the absolute positioning/negative margin dance, and the transform: translateY(-50%) hack that always made text look slightly blurry on non-retina screens.

Then came Flexbox and Grid. They were life-savers, but they always felt like a "tax." You had to change the display property of a container just to center one child, often breaking the natural flow of your document or forcing you to deal with flex-grow quirks you didn't actually want.

But as of 2024, the struggle is officially over. We finally have a one-liner that doesn't require a layout paradigm shift.

The "Flexbox Tax" is gone

Until recently, if you wanted to center something vertically, you usually did this:

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
}

It works, but it’s heavy-handed. By declaring display: flex, you’re changing how all direct children behave. They lose their block-level characteristics. Margins behave differently. It’s a lot of overhead just to move something a few pixels down.

The CSS Box Alignment Module Level 3 changed the game by bringing align-content to block containers. No display: flex or display: grid required.

The new way: align-content on blocks

You can now center content inside a standard block-level element (like a div or a section) using a single property. Here is what the modern "center everything" snippet looks like:

.hero-banner {
  height: 100vh;
  align-content: center; /* This is the magic */
  text-align: center;    /* Still needed for horizontal text alignment */
}

That’s it. No display: flex. No secondary properties. If the element is a block container, align-content: center will push the content to the middle of the block axis.

Why this actually matters

I’ve found this particularly useful for "hero" sections or simple cards where I want the content centered but I want the children to remain block-level elements that occupy the full width of their parent.

In the Flexbox world, if you have three paragraphs, you’d have to set flex-direction: column to keep them stacked. In the new way, they just stay paragraphs:

<div class="simple-box">
  <h2>Look at me</h2>
  <p>I am centered without a flex container.</p>
</div>

<style>
.simple-box {
  height: 400px;
  border: 2px solid #333;
  
  /* The New Standard */
  align-content: center;
}
</style>

The Browser Support (Is it safe?)

This isn't one of those "maybe in five years" features. Support landed across the board in early-to-mid 2024:

* Chrome: 123+
* Safari: 17.4+
* Firefox: 125+

If you’re targeting modern browsers (and let's be honest, IE is dead and buried), you can start using this today. If you need to support older versions, the Flexbox fallback is still your best friend, but for internal tools or modern-first sites, I’m ditching the flex tax immediately.

A quick "Gotcha"

One thing I noticed while playing with this: align-content works on the content of the block, not necessarily the individual items in the way align-items does in Flexbox.

If your block doesn't have a defined height (or min-height), you won't see anything happen. Why? Because the block will just shrink-wrap its content, leaving no empty space to center within.

/* This won't look centered because the div is only as tall as the text */
.oops {
  align-content: center;
}

/* This works because there is actual vertical space to distribute */
.fixed-height {
  height: 500px;
  align-content: center;
}

Moving Forward

We spent years making memes about how hard it is to center a div in CSS. Those memes are now officially legacy code.

The evolution of CSS over the last two years—from Container Queries to :has() and now native block alignment—is making the language feel much more "solved." We're finally getting the tools we should have had in 2010, and I'm not even mad about it.

I’m just happy I don’t have to explain to a junior developer why they need display: flex just to put a title in the middle of a header anymore. Centering is finished. Go delete some unnecessary display: flex declarations.