Centering an image is a common requirement in web development — whether you’re designing a profile page, landing screen, or gallery. With Tailwind CSS, you can center an image horizontally, vertically, or both, using clean and responsive utility classes.
In this post, you’ll learn several ways to center an image using Tailwind CSS, based on different layout scenarios.
🎯 What Does “Centering an Image” Mean?
You might want to:
- Center an image horizontally (left to right).
- Center an image vertically (top to bottom).
- Center an image both horizontally and vertically within a container.
Tailwind CSS makes this easy with utility-first classes, no custom CSS needed.
✅ Method 1: Center Horizontally with mx-auto
If your image is a block-level element and has a fixed width or max-w, use mx-auto:
<img src="image.jpg" alt="Centered Image" class="block mx-auto w-48" />
✅ Explanation:
block: Makes the image a block-level element (default is inline).mx-auto: Applies automatic left and right margin.w-48: Sets a width (optional but helps control image size).
✅ Use case: Centering an image inside a parent container or article.
✅ Method 2: Center Horizontally and Vertically with Flexbox
To perfectly center an image within a full-height or full-width container, use Flexbox:
<div class="flex items-center justify-center h-screen bg-gray-100">
<img src="logo.png" alt="Centered Image" class="w-32 h-32" />
</div>
✅ Explanation:
flex: Turns the container into a flexbox.items-center: Vertically centers the image.justify-center: Horizontally centers the image.h-screen: Makes the container full height of the viewport.
✅ Use case: Centering a logo or hero image in the middle of the screen.
✅ Method 3: Center with Grid and place-items-center
Using Tailwind’s Grid utilities:
<div class="grid place-items-center h-96 bg-gray-200">
<img src="center.jpg" alt="Centered Image" class="w-40" />
</div>
✅ Explanation:
grid: Makes the container a grid layout.place-items-center: Centers content both horizontally and vertically.h-96: Sets a fixed container height (can beh-screenfor full height).
✅ Use case: Hero sections, centered profile images, modals.
✅ Method 4: Center Inline Images with Text
If you want to center an image with or within text, use text-center:
<div class="text-center">
<img src="avatar.png" alt="Avatar" class="inline-block w-24" />
</div>
✅ Explanation:
text-center: Centers inline/inline-block elements.inline-block: Allows the image to respect text alignment.
✅ Use case: Centering small inline images, icons, or profile photos.
🧠 Bonus Tips
- Control image size with
w-*,h-*, ormax-w-*classes. - Add spacing with
my-*,py-*, orp-*as needed. - Use responsive classes (
sm:,md:,lg:) to center or resize images differently on various screens.
✅ Summary
Here’s a quick comparison of ways to center an image with Tailwind:
| Goal | Classes Used | Best For |
|---|---|---|
| Horizontally center | block mx-auto | Articles, blog images |
| Horizontally & vertically | flex items-center justify-center | Hero sections, logos |
| Grid center | grid place-items-center | Modals, call-to-actions |
| Text-based center | text-center inline-block | Inline images or icons |
