Center with margin: auto in CSS Grid
Center elements with auto-margins
In CSS Grid, margin: auto centers items in their grid area by distributing space evenly on both sides. It's less code than place-items when you want horizontal and vertical centering with different semantics.
/* Old approach: absolute positioning + transform */.parent { position: relative; height: 100%;}.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}/* brittle, removes from flow */.parent { display: grid; height: 100%;}.child { margin: auto;}/* margin: auto distributes space evenly */css grid Browser Support
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2017.
Safe to use without fallbacks.
Single property
margin: auto on the child instead of alignment properties on parent. Different mental model, same result.
Allows gap control
Works naturally with grid gap. The child centers within its grid area while gap is preserved.
Asymmetric centering
Can use margin: auto 0 for horizontal centering only, or 0 auto for vertical. Fine-grained control.
How it works
In CSS Grid, when you set margin: auto on a child, the browser distributes available space evenly on both sides of that margin in both axes. This centers the item within its grid area.
The key difference from place-items: this is a property on the child, not the parent. It also plays well with grid gap—the margin centers the child within the area left after gap is accounted for.
This approach is useful when you want different behavior per axis (e.g., margin: auto 0 for horizontal centering only) or when you prefer thinking in terms of child properties rather than parent alignment.