The align-self property aligns the box within its containing block along the block/cross axis, overriding the parent's align-items. Applies to flex items, grid items, and absolutely-positioned boxes..item {
align-self: center;
}.grid-item {
align-self: safe start;
}autoDefault — inherits parent's align-items.normalDefault alignment per layout mode.stretchStretches the box to fill the container.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.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
