The align-items property sets the default align-self for all children — aligns them along the block/cross axis. Applies to flex and grid containers..container {
align-items: center;
}.grid {
display: grid;
align-items: safe end;
}normalDefault — flex/grid behave as stretch.stretchStretches item to fill the container in the alignment axis.startAligns to start edge.endAligns to end edge.centerCenters.self-startAligns to item's own start side.self-endAligns to item's own end side.baselineComputes to first baseline.first baselineAligns to first baseline.last baselineAligns to last baseline.flex-start(flex) Aligns to cross-start.flex-end(flex) Aligns to cross-end.anchor-centerAligns to anchor center (new).safeOverflow modifier: if overflowing, behaves as start.unsafeOverflow modifier: honors alignment even if it overflows.CSS Box Alignment Module Level 3Editor's DraftW3CMDNCSSCSSCSSShow all codeEdit CSS onlineThe plugin that remembers hundreds of CSS items for youEvery CSS property — in a live demonstrationThe bilingual CSS referencedefinitionexamplessyntaxmodulespecificationsourcesvisual demonstrationpreviousnext
