The place-items property is a shorthand that sets align-items and justify-items at once. It is the shortest way to center content in a grid. Pick a value below to see it live, or type your own.
place-items: <align-items> <justify-items>; place-items: center; /* both directions */ place-items: start end; /* top, right */
With one value, both directions use it. With two, the first is the vertical (block) alignment and the second the horizontal (inline) alignment.
.container {
display: grid;
place-items: center;
}
This centers a child horizontally and vertically, no matter its size. It is the shortest centering technique in CSS.
| Value | What it does in each grid cell |
|---|---|
stretch | Items fill their cell (default for items without a fixed size) |
center | Items are centered in their cell |
start | Items sit at the top-left of their cell (in left-to-right languages) |
end | Items sit at the bottom-right of their cell |
In a flex container only the align-items part has an effect, because flexbox has no justify-items. For flex layouts, use align-items with justify-content instead. Related shorthands follow the same pattern: place-content aligns the whole grid inside its container, and place-self aligns one item.
place-items aligns each item inside its own grid cell; place-content aligns the whole grid inside its container when the grid is smaller than the container.
Only the vertical part (align-items) works in flexbox. Use align-items and justify-content for flex layouts.
The parent needs display: grid and enough size; a parent that only wraps its content has no extra space to center in.