To center a div horizontally and vertically with CSS Grid, make its parent a grid container and set place-items: center. Give the parent a height or minimum height if you need visible vertical centering.
The one-line CSS Grid centering rule
.parent {
display: grid;
place-items: center;
}Place the child div inside the parent. display: grid makes the parent a grid container; place-items: center centers its grid items along both axes. It is shorthand for align-items: center on the block axis and justify-items: center on the inline axis. See MDN’s place-items reference.
Example with enough space to show vertical centering
<div class="parent">
<div class="child">Centered content</div>
</div>.parent {
display: grid;
place-items: center;
min-height: 12rem;
}
.child {
max-width: 30rem;
}The minimum height gives the parent room to center the child vertically. If the parent’s height is determined only by its content, there may be little or no extra vertical space for the alignment to distribute. The max-width is an optional constraint on the child, not part of the centering rule.
Choose the alignment property for the job
| CSS | What it aligns | Scope and axes |
|---|---|---|
place-items: center |
Items within their grid areas | All items; both axes |
align-items and justify-items |
Items within their grid areas | All items; set the two axes separately |
place-self: center |
A grid item within its own grid area | One item; both axes |
place-content: center |
The grid tracks or content within the container | Grid content, not the item inside its cell |
MDN’s grid alignment guide explains that combining the align and justify properties can center an item inside a grid area. Use the separate align-items and justify-items declarations when you want different behavior on each axis or prefer to make the two settings explicit. The MDN guide covers item alignment; place-content instead aligns the grid’s tracks or content within the container. The web.dev centering cookbook also describes place-self and auto margins as alternatives for suitable layouts.
#1 Best Overall
Why place-items: center may not look right
The parent has no extra height
Grid alignment can use only the free space in the relevant grid area. If vertical centering is not visible, set a meaningful height or min-height on the parent, as in the example above.
You meant to center the grid tracks
place-items moves items within their cells. If the issue is that the grid tracks themselves are not centered inside the container, use place-content instead. These properties operate at different levels.
Rank #2
Every child is being centered
place-items affects all grid items in the parent. For a single exception, set place-self: center on that child, or use another per-item alignment value.
The item no longer fills its area
Grid items stretch by default when item alignment is not otherwise specified. Setting place-items: center replaces that default alignment, so an item may retain its own size rather than fill the grid area.
The content is larger than its area
If an item is too large for its alignment container, alignment can fall back toward the start position to avoid hiding content. Check the layout with long text and with the parent constrained to smaller dimensions.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
