align-content (block)

Centring with no flex and no grid

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.

.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