SayUI
← Library→ Turn this into a prompt
Layout & grid

Centering

Put an element in the middle of its container—still the most-asked layout question on the web.

Also known as center a div · horizontal and vertical center · absolute center

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Centering".

Center the empty-state block with display: grid; place-items: center on the parent. For the modal (out of flow), use position: fixed; inset: 0; margin: auto; width: fit-content; height: fit-content instead of the translate hack. No table-cell or negative-margin techniques. Apply a 1px optical adjustment where an icon sits next to text if it looks off-center.

Anatomy:
- grid + place-items: Two lines of CSS; the modern default for in-flow content.
- flex + justify + align: Same idea when you also need to lay out siblings.
- absolute + translate(-50%): Out-of-flow overlays (modals) often use this or inset + margin auto.
- margin: auto: Classic horizontal center for block boxes; works on all sides inside flex/grid.

Preferred API / pattern: `flex items-center justify-center / grid place-items-center`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

  • ○Avoid: Parent has no height but you want vertical center
  • ○Avoid: Using align-items on inline text
  • ○Avoid: translate(-50%) makes text blurry
  • ○Avoid: Absolute centering for in-flow content

In plain wordsHow people search for it

“how do I get this thing dead center in its box”“my div will not center no matter what I try”“that modal stuck right in the middle of the screen”

AnatomyOpen for part names

grid + place-items
Two lines of CSS; the modern default for in-flow content.
flex + justify + align
Same idea when you also need to lay out siblings.
absolute + translate(-50%)
Out-of-flow overlays (modals) often use this or inset + margin auto.
margin: auto
Classic horizontal center for block boxes; works on all sides inside flex/grid.

How to write itOpen for stack patterns

Web (HTML/CSS)display: grid; place-items: center
React + Tailwind + shadcn/uiflex items-center justify-center / grid place-items-center
SwiftUIframe(maxWidth: .infinity, maxHeight: .infinity) + alignment
Ant DesignFlex justify="center" align="center" / Row justify="center"

Notes

“How do I center a div” was a meme for a decade; today grid + place-items: center is usually enough. Pick by context: in-flow content → grid/flex; out-of-flow overlays → fixed/absolute with inset: 0 and margin: auto (or translate). Single-line text can just match line-height to the box. Drop table-cell and negative-margin hacks. Watch optical vs geometric center—icons next to labels often need a 1–2px nudge.

Common mistakesHumans and models trip here

  • Parent has no height but you want vertical center: center is relative to the container—if parent and child are the same height, there is no middle.
  • Using align-items on inline text: it only affects flex/grid children; use line-height or change the layout context.
  • translate(-50%) makes text blurry: half-pixel rendering on odd sizes—prefer grid or round dimensions.
  • Absolute centering for in-flow content: it leaves the document flow and siblings stack on top of each other.

More failure symptoms on AI broke it.

Related patterns

Modal DialogA centered window that blocks the page until the user responds.Empty StateA deliberate screen when a list or view has no items—guidance, not a blank void.Grid SystemSplit the page into N equal columns (usually 12) and size blocks by how many columns they span.Holy Grail LayoutHeader, footer, side rails, and a flexible main region—the classic full-page shell.

Spotted a wrong name or missing pattern?

Message on X