Last updated: March 13, 2026
How to Center a Div in Tailwind CSS (5 Methods)
The complete guide to centering elements in Tailwind CSS. Live demos, copy-paste code, and when to use each method.
Quick Reference
Flexbox (Best)
flex justify-center items-centerGrid (Shortest)
grid place-items-centerHorizontal Only
mx-auto (+ width)All methods require the parent to have a defined height for vertical centering (e.g., h-screen, h-full, h-64).
Flexbox (Recommended)
The go-to method for centering in Tailwind. Use flex with justify-center and items-center to center both horizontally and vertically.
Live Preview
Tailwind Classes
Key Classes:
flexjustify-centeritems-centerWhen to use this method:
- Centering content in any container
- When you need both horizontal and vertical centering
- For centering multiple items in a row or column
- When building navigation or card layouts
Grid with place-items-center
The most concise way to center a div. Grid's place-items-center handles both axes in a single class.
Live Preview
Tailwind Classes
Key Classes:
gridplace-items-centerWhen to use this method:
- When you want the shortest possible code
- Centering a single element
- When you're already using CSS Grid
- Perfect for hero sections and modals
Grid with place-content-center
Centers all content as a group. Unlike place-items-center, this keeps multiple elements together rather than centering each individually.
Live Preview
Tailwind Classes
Key Classes:
gridplace-content-centerWhen to use this method:
- When centering multiple elements as a group
- For text blocks that should stay together
- When you need centered content to flow naturally
- Perfect for centered forms or card content
Absolute + Transform
Perfect for overlays, modals, and popups. Uses absolute positioning with negative translate to achieve pixel-perfect centering.
Live Preview
Tailwind Classes
Key Classes:
absolutetop-1/2left-1/2-translate-x-1/2-translate-y-1/2When to use this method:
- For modals and popups
- When element needs to be removed from document flow
- For overlays on images or videos
- When Flexbox/Grid might affect other elements
Margin Auto (Horizontal Only)
The classic CSS centering technique. Uses mx-auto to center a block element horizontally. Requires a fixed width.
Live Preview
Tailwind Classes
Key Classes:
mx-autoWhen to use this method:
- For horizontal centering only
- When element has a fixed or max width
- For centering containers or cards
- Classic approach that works everywhere
Method Comparison
| Method | Horizontal | Vertical | Code Length | Best For |
|---|---|---|---|---|
| Flexbox | Yes | Yes | 3 classes | General purpose, most layouts |
| Grid place-items | Yes | Yes | 2 classes | Single element, minimal code |
| Grid place-content | Yes | Yes | 2 classes | Multiple elements as group |
| Absolute + Transform | Yes | Yes | 5 classes | Overlays, modals, popups |
| Margin Auto | Yes | No | 2 classes | Horizontal only, containers |
Common Mistakes to Avoid
Forgetting the height
Vertical centering requires the parent to have a defined height. Without h-screen, h-full, or a specific height, there's nothing to center within.
Using text-center for div centering
text-center only centers inline content (text, images). To center a div, use Flexbox, Grid, or margin auto.
Missing the relative parent for absolute
When using absolute centering, the parent must have relative. Otherwise, positioning is relative to the viewport.
Forgetting width for mx-auto
mx-auto requires the element to have a width. Block elements are 100% wide by default, so add w-fit or a specific width.
Copy-Paste Snippets
Ready-to-use centering patterns. Click to copy.
Frequently Asked Questions
The shortest way is using Grid: <div class="grid place-items-center">. This single utility class (plus a height) centers content both horizontally and vertically. It's more concise than the Flexbox approach which requires two classes (justify-center items-center).
To center vertically in Tailwind, use either Flexbox with items-center (flex items-center) or Grid with place-items-center. Make sure the parent container has a defined height (h-screen, h-full, or a specific height like h-64). Without a height, there's nothing to center within.
place-items-center centers each child element individually within its grid cell. place-content-center centers all children as a group in the center of the container. Use place-items for a grid of centered items, and place-content when you want multiple elements to stay together as a centered block.
To center text inside a div, use text-center. To center a div itself within its parent, use Flexbox (flex justify-center items-center), Grid (grid place-items-center), or margin auto (mx-auto with a width). text-center only affects inline content like text and images, not block-level positioning.
Yes! inset-0 (which sets top, right, bottom, left to 0) combined with m-auto and a fixed size creates centering: <div class="absolute inset-0 m-auto w-48 h-24">. This technique works because margin: auto on an absolutely positioned element with inset-0 distributes the remaining space equally. It's an alternative to the translate method.
More CSS Tutorials
Copy CSS from Website
Extract styles with 2 clicks
Center a Div (CSS)
Flexbox, Grid, and more
Convert CSS to Tailwind
CSS to utility classes
Glassmorphism Effect
Frosted glass UI style
Neumorphism Button
Soft UI button design
Responsive Navbar
Mobile-friendly navigation
Sticky Header
Fixed navigation on scroll
CSS Pagination
Page navigation styles
CSS Accordion
Expandable content sections
Dropdown Menu
Hover and click dropdowns
CSS Modal
Popup dialog boxes
Toast Notifications
Animated alert messages
Hamburger Menu
Animated menu icon
Animate Gradients
Moving gradient backgrounds
Skeleton Loader
Loading placeholder UI
Element Screenshot
Capture any element as image
Pick Color from Website
Eyedropper tool comparison
Identify Fonts
Find fonts on any website
Download All Images
Bulk save images from any site
Measure Elements
Page ruler and measurements
Extract Colors from Website
Get any color palette instantly
Dark Mode Toggle
CSS variables and localStorage
Responsive Grid
CSS Grid auto-fit and minmax
Center Text in CSS
text-align, Flexbox, and Grid
Make Text Bold
font-weight values explained
Add Shadow in CSS
box-shadow, text-shadow, drop-shadow
Round Corners in CSS
border-radius and pill shapes
Style File Input
Custom upload buttons