Center content deliberately

Center one child on both axes with Grid:

<div class="grid min-h-screen place-items-center">...</div>

place-items-center aligns Grid items on both axes. min-h-screen gives the grid at least viewport height, although min-h-dvh can better track changing mobile browser chrome in modern layouts.

“Center this” is not one CSS operation. First identify the box and axis:

• center a constrained block horizontally: mx-auto max-w-xl
• center inline text inside its box: text-center
• center Flex children on both axes: flex items-center justify-center
• center a Grid item in its cell: place-self-center
• center all Grid items in their cells: place-items-center

mx-auto needs leftover inline space. A w-full block already occupies all available width, so its automatic margins have nothing to distribute. text-center changes inline content alignment; it does not center the paragraph box itself.

Vertical centering can conflict with overflow. A sign-in card centered in a fixed-height viewport may push content offscreen when text grows. Prefer a minimum height plus page padding so the layout can expand and scroll:

<main class="grid min-h-dvh place-items-center p-6">
  <form class="w-full max-w-md">...</form>
</main>

Do not center everything by reflex. Long prose is usually easier to scan left-aligned even when its container is centered.

Your action is to center a form box while keeping its labels left-aligned. Test a short and very tall form at 200% zoom, then explain why min-h-dvh plus padding is safer than a fixed height.