Centring with no flex and no grid

Q: Does align-content work without display: flex?

Yes. Current engines apply align-content to ordinary block containers, so align-content: center centres the children vertically in a display: block box. The box needs a height or min-height taller than its content, otherwise there is no free space to distribute.

Q: Why does align-items: center not work on a block element?

align-items and justify-content still apply only to flex and grid layouts, so a block container ignores them without any warning. The one alignment property block layout accepts is align-content, and it moves the children as a group along the block axis.

Live demo

Two children, centred

A heading and a paragraph, held in the middle of a box that is still display: block.

Caveat and fallback

CaveatIt distributes free space, so a box with none — an auto height, which is most boxes — accepts the declaration and does nothing with it. The height or min-height is the load-bearing half, and leaving it out is the whole of "align-content does not work in block layout". The other half is that only this property crossed over: align-items and justify-content are still inert in block layout, and reaching for them is the usual first guess. Children stay in the block flow while this happens, so their margins still collapse into each other and shift the centre by an amount you did not write.

FallbackAn older engine ignores it and the content sits at the top of the box: plain rather than broken, which is what makes this safe to ship without a flex wrapper underneath it. If the centring is load-bearing rather than cosmetic, keep the wrapper — a @supports (align-content: center) block is not worth it for a difference this small.

Source code

CSS

.hero {
  /* still display: block */
  min-height: 132px;

  /* with no free space to hand out
     this line is live and inert */
  align-content: center;
}

Published 30 Aug 2026

Questions

Does align-content work without display: flex?

Yes. Current engines apply align-content to ordinary block containers, so align-content: center centres the children vertically in a display: block box. The box needs a height or min-height taller than its content, otherwise there is no free space to distribute.

Why does align-items: center not work on a block element?

align-items and justify-content still apply only to flex and grid layouts, so a block container ignores them without any warning. The one alignment property block layout accepts is align-content, and it moves the children as a group along the block axis.

Why is my content slightly off-centre with align-content?

The children's margins are part of what gets centred. A heading's default top margin or a paragraph's bottom margin adds uneven space above or below, which shifts the visible text. Zero the first child's top margin and the last child's bottom margin.