How to Center Content with CSS Grid

Center anything with CSS Grid using one declaration: place-items: center on the container — it centers the item both horizontally and vertically, no matter the item's size. Try it live in our free CSS grid generator; the full centering playbook is below.

place-items: center — the one-line dead center

The shortest correct answer to 'how do I center this' in modern CSS is two declarations: .container { display: grid; place-items: center; }. place-items is shorthand for align-items (vertical) and justify-items (horizontal) together, and center positions each grid item in the middle of its cell. Because the item is the only child, its cell is the whole container — so a 320 × 180-pixel card inside a full-viewport container lands exactly dead-center: (100vw − 320) ÷ 2 from the left, (100vh − 180) ÷ 2 from the top, computed by the browser at every viewport size. This beats the old hacks on every axis: no position: absolute; top: 50%; transform: translate(-50%, -50%) that breaks document flow, no margin: 0 auto that only handles horizontal centering, no line-height tricks that collapse with multi-line text. It also handles unknown dimensions — a dialog whose height depends on its content stays centered as content grows, because centering is resolved against the cell, not the item. The one caveat: place-items: center centers every child, so in a multi-item container where only one item should be centered, apply place-self: center to that item instead. For hero sections, empty states, loading spinners, and 404 pages, the one-liner is the whole solution.

The margin: auto trick inside grid cells

The second centering tool is older and subtler: margin: auto on a grid item absorbs all free space in its cell — on both axes, not just horizontally. In a Grid container, .item { margin: auto; } centers the item even when the container is not using place-items, which makes it perfect for mixed layouts: a header grid where the logo hugs the left, the search bar is centered, and the avatar hugs the right — give the search bar margin: 0 auto and leave the others alone. Unlike block layout, where auto margins only center horizontally, Grid (and Flexbox) resolve auto margins on both axes, so margin: auto dead-centers too. The trick's real value is selectivity: centering one item without affecting its siblings. It also works when the item is smaller than its cell in a named-area layout — a button inside a hero area with margin: auto sits centered in the hero without any container-level alignment changes. One limitation: auto margins and place-items compose in a specific order — if the container sets place-items: start and the item sets margin: auto, the margin wins for that item, which is exactly the override behavior you want. If you are sketching a centered hero visually, our grid generator lets you preview place-items and margin centering side by side.

Centering stacks: overlays, badges, and play buttons

Grid's cleanest party trick is stacking: place multiple items in the same cell and center them all, which is how you build image overlays, video play buttons, and notification badges. The pattern: .stack { display: grid; } .stack > * { grid-area: 1 / 1; place-self: center; } — every child occupies cell 1/1, so they pile up, and each centers itself. A thumbnail with a centered play button becomes three elements and four declarations, with no absolute positioning and no z-index juggling (though you may still add z-index for layer order). A 'sale' badge pinned to a card's top-right corner: place-self: start end — vertical start, horizontal end. The reason this beats absolute positioning: the stack's size is driven by its largest child (usually the image), so the overlay always matches the image dimensions, even responsive ones. With absolute positioning you would need inset: 0 plus a positioned parent and hope the parent's height is right. Real-world numbers: a 640 × 360-pixel video thumbnail with a 72-pixel circular play button — the button lands at (640 − 72) ÷ 2 = 284px left and (360 − 72) ÷ 2 = 144px top, automatically, at every breakpoint. This stacking pattern is also the simplest way to build skeleton loaders: a shimmer layer stacked over placeholder blocks, all centered and sized by the same cell.

Grid vs Flexbox for centering: when each wins

For pure centering, both systems work — display: flex; align-items: center; justify-content: center; versus display: grid; place-items: center; — so which should you default to? Choose Grid when the centered item lives inside a larger two-dimensional layout: a card centered in a dashboard cell, a form centered in a page skeleton, content centered within a named area. The container is already a grid, so place-items or place-self adds one declaration instead of restructuring. Choose Flexbox when centering a row or column of items: three buttons centered as a group with even gaps — display: flex; justify-content: center; gap: 12px; keeps them as one centered unit, while Grid would center each in its own cell and spread them out. Also prefer Flexbox when the centered content is text that might wrap next to an icon: flex's baseline alignment handles mixed content gracefully. A genuinely useful hybrid: Grid for the page, Flexbox inside each cell — place-items: center on the cell, then a flex column inside the card for its title, text, and button. For related front-end reading, our three-color gradient guide covers another visual builder in the same family. And remember the accessibility angle: centering with Grid keeps everything in normal document flow, so tab order and screen-reader order stay sane — unlike the absolute-positioning hacks this technique replaces. For the copy inside those centered heroes, check length with our word counter, convert any markdown source with the markdown to HTML converter, and see open-graph tags for the sharing layer.