Center with place-items

Quick implementation

.centered-parent {
  display: grid;
  place-items: center;
  min-height: 100dvh; /* or any height */
}

Prompt this to your LLM

Includes role, constraints, and common variations.

You are a senior frontend engineer.

Goal: Center an element both horizontally and vertically using modern CSS.

Technical constraints:
- Use display: grid on the parent.
- Use place-items: center (shorthand for align-items + justify-items).
- The parent needs a defined height (min-height: 100dvh for full-page, or a fixed/relative height).
- No flexbox, no absolute positioning, no transforms.
- Works for any child element — text, cards, images, forms.

Variations to provide:
A) Full-page center (login form, hero, error page).
B) Center inside a card or container with a set height.
C) Center multiple children in a column (add grid gap).

Return clean HTML + CSS.

Why this matters

Centering in CSS used to require hacks — negative margins, table-cell display, absolute positioning with transforms. display: grid; place-items: center is the modern answer: two lines, works everywhere, handles any content size. It's the default centering technique in 2026.

The logic

place-items is a shorthand that sets both align-items (block axis) and justify-items (inline axis) to center. Grid creates a single-cell layout by default, so the child lands dead center. The parent needs a height — without one, it collapses to the content height and there's nothing to center within.

Accessibility & performance

Grid centering has no accessibility implications — it's pure visual layout. Use min-height: 100dvh instead of 100vh to account for mobile browser chrome. For centering multiple items, the grid will stack them vertically by default; add gap for spacing.