Newly available Useful when align-content in block layouts helps structure space, flow, or sizing without relying on brittle manual adjustments.

align-content in block layouts

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

Layout

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
block context
123
123
125
17.4
123
17.4
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
/* Vertical center alignment without Flexbox/Grid */
.center-block {
  height: 300px;
  align-content: center;
}

/* Bottom alignment */
.footer-push {
  min-height: 100vh;
  align-content: end;
}

Live demo

Center(center aligned)

align-content in block layouts Center(center aligned) demo.

PreviewFullscreen

End(bottom aligned)

align-content in block layouts End(bottom aligned) demo.

PreviewFullscreen

Start(top aligned / comparison)

align-content in block layouts Start(top aligned / comparison) demo.

PreviewFullscreen

Use cases

  • Component layout

    Use align-content in block layouts to create more predictable spacing and placement inside reusable UI patterns.

  • Responsive structure

    Adapt containers and flow rules so layouts stay stable across viewport changes.

Cautions

  • Test layout rules with real content, long labels, and small screens before depending on them broadly.
  • Prefer simpler layout primitives if they already solve the problem clearly.

Accessibility

  • Layout choices should preserve reading order and support zoom without clipping.
  • Avoid visually clever positioning that makes content harder to follow with keyboard or assistive tools.

Related links