align-content in block layouts
The align-content property vertically aligns content in block layouts, like it does in flex or grid layouts.
Overview
The align-content property vertically aligns content in block layouts, like it does in flex or grid layouts.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.properties.align-content.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
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
Powered by web-features