CSS Gets Native Vertical Centering in 2024 – Using align-content:center

Feature Overview

Chrome 123 (2024) adds native support for the CSS property align-content:center, which can vertically center ordinary block‑level elements without relying on Flexbox or Grid layouts.

Basic Usage

Simple example:

<div style="align-content:center; height:200px; background:#614ef5;">
  align-content：I can be vertically centered!
</div>

The text is rendered centered vertically inside the 200 px tall container.

Browser Support

Data from the “Can I use” site (screenshot) shows that the majority of modern browsers already support align-content:center, making it safe for production use.

Common Pitfalls

Inline Elements

The property applies only to normal block elements. When the element is set to display:inline, vertical centering fails:

<div style="display:inline; align-content:center; height:200px; background:#614ef5;">
  align-content：I can be vertically centered!
</div>

Changing display to inline-block restores the effect.

Flex Layout Nuances

In a flex container with flex-wrap:no-wrap, align-content:center does not work. Adding flex-wrap:wrap enables the property:

.box {
  display:flex;
  align-content:center;
  height:200px;
  background:#dcd7ff;
}
.box span {
  width:46px;
  height:46px;
  background-color:#9181ff;
  border-radius:4px;
  margin-left:10px;
}
.box2 {
  margin-top:20px;
  flex-wrap:wrap;
}

Before adding flex-wrap:wrap the child spans are not vertically centered; after the change they are centered, as shown in the before/after screenshots.

Open Question

Compare align-items:center —the more common way to achieve vertical centering in flex containers—with align-content:center, and consider the differences between the two properties.