5 Tailwind CSS Ways to Center Div

The flexbox method needs two utilities on the parent, not on the child: flex items-center justify-center. flex turns the container into a flex context, justify-center centers children on the main (horizontal) axis, and items-center centers them on the cross (vertical) axis. The child <div> needs no classes of its own. The catch is that items-center only has room to work when the parent is taller than its content — give the parent a height like h-screen or min-h-96, otherwise it collapses to the child's height and vertical centering looks like it does nothing at all. Demo 01 lets you toggle each axis on and off independently, so you can see exactly which class owns the horizontal direction and which owns the vertical one.

grid place-items-center is the shortest full centering in Tailwind — two classes on the parent handle both axes at once. place-items-center is the shorthand for align-items: center plus justify-items: center, so unlike flexbox you never write separate utilities for the horizontal and vertical directions. It behaves the same way flexbox does about height: the parent must have room on the block axis (h-screen, min-h-dvh, or a fixed height) or there is nothing to center within. One difference worth knowing — grid centers the item inside its grid area, so a single-child layout centers cleanly, but if you later add siblings they stack in one implicit cell unless you define columns. Demo 02 shows it working against a fixed-height card so you can see the two-class result directly.

Demo 03 shows three ways. The classic is absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2: top-1/2 left-1/2 places the element's top-left corner at the parent's center, then the negative translate pulls it back by half its own width and height so its center lands on that point. The translate step is mandatory — without it the corner sits at center and the box spills down and to the right. A cleaner alternative is absolute inset-0 m-auto with a fixed w- and h- on the child: inset-0 stretches all four offsets to 0 and m-auto splits the leftover space evenly. Either way the parent needs relative, or the child centers against the nearest positioned ancestor — often the viewport, which is rarely what you want.

mx-auto centers on the inline (horizontal) axis only — it sets left and right margin to auto, which splits the free horizontal space. It does nothing vertically because my-auto has no effect on a normal block element in flow; vertical auto-margins only resolve inside a flex or grid parent. So a plain <div> with only mx-auto hugs the top of its container no matter what you do. mx-auto also needs the element to be narrower than its parent — a block is full-width by default, so pair it with w-fit, a max-w- value, or an explicit width, or the auto margins compute to 0 and nothing moves. Demo 04 uses mx-auto w-fit and shows exactly why you reach for flex or grid the moment the vertical axis matters too.

Both center on both axes, so the choice is really about what else the layout does. Reach for flex items-center justify-center when children sit along one axis and you want per-axis control — you can center vertically but left-align horizontally with justify-start, or space several children with gap- and justify-between. Reach for grid place-items-center when you want the shortest possible centering of a single item, or when the surrounding layout is already a grid. Flexbox is also safer when the centered content might overflow: a flex item can shrink, whereas an over-tall grid item centered in its area can push out of view. Demo 05 lines every method up side by side so you can compare class count and behaviour at a glance instead of guessing.

None of these methods change the reading order a screen reader or keyboard follows — flex, grid and auto-margins are purely visual and leave the DOM sequence intact, so focus order matches source order. The ones to watch are the order- utility and flex-row-reverse: they move items visually but not in the accessibility tree, so a reversed row still reads in source order and can confuse keyboard users. Absolute centering (Demo 03) is also visual-only, but because the element leaves normal flow it no longer reserves space, so make sure it isn't silently covering interactive content underneath. Centering itself needs no ARIA; keep the heading and landmark structure you would use in any layout, and don't swap a meaningful element for a bare <div> just so it is easy to center.

The number one reason a flex or grid centered div won't move vertically is that the parent has no spare height. items-center and place-items-center distribute free space on the block axis, and if the parent is only as tall as its content there is no free space to distribute — it looks like the class is being ignored. Give the parent an explicit height: h-screen, min-h-dvh, a fixed h-96, or a min-h- matched to the layout. A second cause is centering the wrong element — the utilities belong on the parent container, not on the child you want centered. Put flex items-center on the child itself and you are centering its contents, not the child within its parent. Demo 01 makes this visible by letting you add and remove the parent height live.

Avoid the absolute-position method (Demo 03) as your everyday default. Because absolute removes the element from normal flow, the parent collapses as if the child weren't there, so surrounding content can overlap it and you lose automatic height — you end up hard-coding w- and h- values that break the moment the content grows. It is the right tool only for genuine overlays: a modal centered over a backdrop, a badge pinned to a card corner, a spinner over a loading panel. For ordinary layout where the centered box should push the page taller and sit among other content, use flex items-center justify-center or grid place-items-center instead — they keep the element in flow, size to its content, and reflow responsively with no magic numbers to maintain.