Centering a div is one of the oldest jokes in web development. CSS has historically made it more complicated than it should be, and the meme has outlasted the problem itself. With Tailwind CSS, especially at v4, you have several clean, readable options. The trick is knowing which one fits the situation.
This guide covers five techniques in order of how often you will reach for them. Every example uses Tailwind v4 class names (which map 1-to-1 with what v3 called the same things — centering utilities did not change in v4). The difference you will notice in a v4 project is that theme customization happens in CSS with @theme instead of tailwind.config.js, but none of that affects the utility classes below.
1. Flexbox — the everyday default
For most cases, put flex, items-center, and justify-center on the parent. That is it.
<div class="flex items-center justify-center h-64 bg-slate-100">
<div class="bg-white p-6 rounded-lg shadow">
I am centered.
</div>
</div>flex— turns the parent into a flex containeritems-center— centers children on the cross axis (vertically, for a row direction)justify-center— centers children on the main axis (horizontally, for a row direction)
The parent needs an explicit height for vertical centering to have any effect. If you want it to fill the full viewport, use min-h-screen instead of a fixed height.
<div class="flex items-center justify-center min-h-screen">
<div class="bg-white p-8 rounded-xl shadow-lg max-w-md w-full">
Full-screen centered card
</div>
</div>This pattern is what you want for modals, hero sections, login screens, and any layout where one child needs to sit in the middle of a container.
2. Grid with place-items-center
Grid gives you a one-property shorthand: place-items-center sets both align-items and justify-items to center in a single class. It is particularly handy when the parent already uses grid for other reasons, or when you want every cell in a multi-column grid to center its own content.
<!-- Center a single child inside a container -->
<div class="grid place-items-center h-64 bg-slate-100">
<div class="bg-white p-6 rounded-lg">Centered</div>
</div>
<!-- Center content inside every cell of a 3-column grid -->
<div class="grid grid-cols-3 place-items-center gap-4 h-48 bg-slate-100">
<div>01</div>
<div>02</div>
<div>03</div>
</div>A related utility, place-content-center, centers the group of items as a whole rather than centering each item within its cell. Use place-items-center when you want each child centered in its own grid area; use place-content-center when you want the entire block of items pushed to the middle of the container.
3. Horizontal centering with mx-auto
Sometimes you only need to center something horizontally — a content column, a form, a card — and the content's natural top position is fine. The classic CSS technique (margin: 0 auto) maps directly to mx-auto in Tailwind.
<div class="mx-auto max-w-2xl px-4">
<p>This block of text is horizontally centered with auto side margins.</p>
</div>The important detail: mx-auto only does something if the element is narrower than its container. A block element at full width has no room to center. You almost always pair mx-auto with a max-w-* utility. Common values:
max-w-sm— 24rem (384px)max-w-xl— 36rem (576px)max-w-2xl— 42rem (672px)max-w-4xl— 56rem (896px)max-w-6xl— 72rem (1152px)max-w-screen-xl— 1280px
This is the right pattern for page-level layout — wrapping your main content in a centered, max-width container. It is not the right tool if you also need vertical centering.
4. Centering text inside a div
It is worth separating this out because people sometimes try to use flexbox or grid when they just want text to sit in the middle of a box. For inline text content, text-center handles horizontal alignment, and you can pair it with leading-* or padding to handle vertical spacing.
<div class="text-center bg-slate-100 p-8 rounded-lg">
<h2 class="text-2xl font-bold">Section heading</h2>
<p class="mt-2 text-slate-600">Supporting copy goes here.</p>
</div>text-center applies text-align: center, which centers inline content (text, inline elements) within the block. It does not center the div itself within its parent — that is what the previous techniques handle.
5. Absolute positioning — overlays, badges, and tooltips
When an element needs to be centered relative to a positioned ancestor (not within normal document flow), absolute positioning is the right tool. Two sub-patterns cover most cases.
Known size: inset-0 + m-auto
If the element has a fixed width and height, use absolute inset-0 m-auto. This stretches all four edges to the parent boundaries and then lets auto margins find the center.
<div class="relative h-64 bg-slate-100">
<div class="absolute inset-0 m-auto w-32 h-32 bg-white rounded-full shadow">
Badge
</div>
</div>Unknown size: top-1/2 left-1/2 with -translate
When you do not know (or do not want to hard-code) the element's dimensions, use top-1/2 left-1/2 to move the top-left corner to the parent's center, then pull back by half the element's own size with -translate-x-1/2 -translate-y-1/2.
<div class="relative h-64 bg-slate-100">
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
bg-white px-4 py-2 rounded shadow text-sm">
Dynamically sized tooltip
</div>
</div>The parent must have relative (or any non-static position) for the child's absolute positioning to be anchored to it rather than the nearest positioned ancestor up the tree.
Responsive and conditional centering
All of these utilities accept Tailwind's breakpoint prefixes. You might center something on mobile but switch to a left-aligned layout on wider screens:
<div class="flex flex-col items-center md:flex-row md:items-start gap-6">
<img src="/avatar.jpg" alt="Profile" class="w-24 h-24 rounded-full" />
<div>
<h2 class="text-xl font-semibold text-center md:text-left">Alex Morgan</h2>
<p class="text-slate-500 text-center md:text-left">Lead Designer</p>
</div>
</div>This stacks the avatar above the text on small screens (both centered), then switches to a horizontal row with left-aligned text at the md breakpoint.
Quick reference: which technique when
- Center one thing inside a container (both axes):
flex items-center justify-centeron the parent, with an explicit height. - Center every cell's content in a grid:
grid place-items-centeron the parent. - Center a block horizontally in a page column:
mx-auto max-w-*on the block. - Center inline text inside a box:
text-centeron the containing element. - Center a floating element (overlay, badge, tooltip):
absolute inset-0 m-auto(known size) orabsolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2(unknown size).
A note on the "safe" alignment variants
Tailwind v4 also introduced items-center-safe and place-items-center-safe (mapping to safe center in CSS). The safe keyword prevents overflow from being hidden when content is larger than the container — instead of clipping the overflowing side, the browser falls back to start alignment so the content remains scrollable. This is useful in navigation bars or card rows where items might overflow on small screens. In most centering scenarios the standard items-center is sufficient, but the safe variant is worth knowing if you hit content-clipping bugs on narrow viewports.
Centering in Tailwind is a matter of picking the right level: the parent's layout context (flex or grid) handles both-axis centering, margin auto handles horizontal-only centering in flow, and absolute positioning handles elements that live outside normal flow. Once those three layers are clear, the class names are obvious — the hard part was always the mental model, not the syntax.