~/css/tailwind-center-div
Every common way to centre something with Tailwind, each labelled with its classes: flexbox, grid with place-items-center, absolute positioning with translate, m-auto inside a flex parent, inset-0 with m-auto and a centred block of text.
The everyday answer: flex items-center justify-center on the parent centres a child on both axes. It also centres several children as a group, and the parent just needs a height.
<div class="flex h-44 w-full max-w-xs items-center justify-center rounded-xl border-2 border-dashed border-slate-400 bg-white">
<div class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-bold text-white">flex · items-center · justify-center</div>
</div>The shortest answer: grid place-items-center. One class on the parent centres the child horizontally and vertically, and it works the same for text, images and whole cards.
<div class="grid h-44 w-full max-w-xs place-items-center rounded-xl border-2 border-dashed border-slate-400 bg-white">
<div class="rounded-lg bg-emerald-700 px-4 py-2 text-sm font-bold text-white">grid · place-items-center</div>
</div>For overlays such as a play button over an image: absolute left-1/2 top-1/2 plus -translate-x-1/2 -translate-y-1/2. The child leaves the layout, so it can sit on top of other content.
<div class="relative h-44 w-full max-w-xs rounded-xl bg-[linear-gradient(135deg,#0ea5e9,#6366f1)]">
<button type="button" aria-label="Play video" class="absolute left-1/2 top-1/2 grid size-14 -translate-x-1/2 -translate-y-1/2 place-items-center rounded-full bg-white text-xl text-indigo-700 shadow-lg focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-white"><span aria-hidden="true" class="ml-1">▶</span></button>
</div>Inside a flex or grid parent, m-auto on the child takes up all the free space on every side, which centres it. Handy when only one child should be centred while its siblings keep their place.
<div class="flex h-44 w-full max-w-xs flex-col rounded-xl border-2 border-dashed border-slate-400 bg-white p-2">
<p class="text-xs font-semibold text-slate-600">Header stays at the top</p>
<div class="m-auto rounded-lg bg-rose-700 px-4 py-2 text-sm font-bold text-white">m-auto</div>
</div>An absolutely positioned box with a fixed size, inset-0 and m-auto centres itself without transforms. It works because the browser shares the leftover space equally between the auto margins.
<div class="relative h-44 w-full max-w-xs rounded-xl border-2 border-dashed border-slate-400 bg-white">
<div class="absolute inset-0 m-auto grid size-20 place-items-center rounded-2xl bg-amber-400 text-xs font-bold text-amber-950">inset-0 m-auto</div>
</div>Centring a paragraph is two jobs: text-center for the lines and mx-auto with a max width for the block. text-balance evens out the line lengths so the centred shape looks tidy.
<div class="w-full max-w-xs rounded-xl bg-white p-6 text-center">
<h3 class="mx-auto max-w-[16ch] text-balance text-2xl font-bold text-slate-900">Everything you need to launch</h3>
<p class="mx-auto mt-2 max-w-[28ch] text-balance text-sm text-slate-600">One plan, every feature, and help from real people when you get stuck.</p>
</div>grid place-items-center is the shortest; flex items-center justify-center is best when several children should sit together in the middle.
absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 centres an element over something else, such as a play button on a video.
In a flex or grid parent, m-auto pushes a single child into the middle while its siblings stay where they are.
text-center centres lines; mx-auto with a max width centres the block itself.
The parent needs a height. Without one, there is no space to centre within.
All are equally fast; choose the one that fits the layout.
Yes, see the CSS center a div collection.