coderef

align-content in block layoutsBaseline · Newly available

The align-content property vertically aligns content in block layouts, like it does in flex or grid layouts.

Works in the latest version of every major browser, but older devices may not support it yet. Baseline since Apr 16, 2024.

How to use ↓Compare browsers

Browser support

DesktopChrome
1–122Not supported
123+Supportedsince Mar 19, 2024
Current: 155
Edge
12–122Not supported
123+Supportedsince Mar 22, 2024
Current: 154
Firefox
1–124Not supported
125+Supportedsince Apr 16, 2024
Current: 157
Safari
1–17.3Not supported
17.4+Supportedsince Mar 5, 2024
Current: 27
MobileChrome Android
18–122Not supported
123+Supportedsince Mar 19, 2024
Current: 155
Firefox Android
4–124Not supported
125+Supportedsince Apr 16, 2024
Current: 157
Safari iOS
1–17.3Not supported
17.4+Supportedsince Mar 5, 2024
Current: 27

How to use

Every current browser supports this, but it only became Baseline on Apr 16, 2024. Use it as a progressive enhancement, or keep a fallback if you support older devices.

Example

Full syntax and examples are on MDN — see the links below.

Feature detection

CSS · check before using
@supports (align-content: initial) {
  /* styles that rely on align-content */
}

/* or in JavaScript */
if (CSS.supports("align-content", "initial")) {
  // use it
}

Specification