CSS align-content in Block Layout: Vertical Centering
Vertical centering without flexbox or grid
Centering something vertically used to mean turning the box into a flex or grid container, or reaching for table-cell or a transform. Now align-content: center works on an ordinary block, so the box keeps its normal layout.
The old hack vs the modern fix
View demo.box {
display: table-cell;
height: 200px;
vertical-align: middle;
}.box {
min-height: 200px;
align-content: center;
}<div class="min-h-[200px] content-center"> <p>Centered without flex or grid</p></div>Align content block browser support
123+
125+
17.4+
123+Live demo
Why the modern way wins
One line
align-content: center on the box is all it takes. You don't change its display at all.
Block layout stays intact
Margins still collapse, floats and inline content behave as before, and children aren't turned into flex or grid items.
No positioning tricks
There's no top: 50% and translate(-50%), so nothing gets blurry on half pixels or pulled out of the flow.
- Lines Saved
- 4 → 1
- No display change
- Old Approach
- display: table-cell
- Or flex, or a transform
- Modern Approach
- align-content: center
- On a plain block
How it works
align-content used to do nothing on a normal block element. Browsers now apply it to block containers too, so align-content: center moves all of the box's content to the middle of its height when the box is taller than what's inside it.
The box needs a height for there to be space to center in, like a min-height, a fixed height or a stretched grid cell. The content moves as one group, so several paragraphs stay together in the middle instead of being spread apart.
Flexbox and grid are still the better fit when you also need gaps, alignment per child or a row of items. For a single card, a hero or a table cell with text in it, the block version keeps the layout simple.