DEV Community

Cover image for Day 1: How to Center Anything in Tailwind CSS (Horizontally + Vertically)
Ruqaiya Beguwala
Ruqaiya Beguwala

Posted on • Originally published at Medium

Day 1: How to Center Anything in Tailwind CSS (Horizontally + Vertically)

#tailwindcss #ui

Welcome to 15 Days of Tailwind Tips

As a frontend developer, you’ve likely heard the phrase “Tailwind CSS is utility-first.” But what does that really mean in day-to-day development?

This series, "15 Days of Tailwind Tips (Under 60 Seconds)," is designed to help beginner and intermediate developers become more confident and efficient with Tailwind CSS — without spending hours reading documentation. Each day, I’ll share a small, actionable tip or trick, starting with the basics and gradually moving toward more advanced techniques.

Let’s start with one of the most fundamental layout challenges: centering elements.

Horizontal Centering (Classic Approach)

To horizontally center a block-level element (like a <div>), use the mx-auto utility. This sets margin-left and margin-right to auto.

<div class="w-64 mx-auto bg-blue-100 p-4 rounded"> I’m horizontally centered! </div>
Enter fullscreen mode Exit fullscreen mode

Breakdown:

  • w-64: Sets a fixed width — required for horizontal auto margins to work
  • mx-auto: Horizontally centers the element inside its container
  • bg-blue-100 p-4: Adds background color and padding for visibility

Full Centering with Flexbox

To center content vertically and horizontally inside the full viewport:

<div class="flex items-center justify-center h-screen bg-gray-100"> <div class="p-6 bg-white rounded shadow"> I'm perfectly centered! </div> </div>
Enter fullscreen mode Exit fullscreen mode

Breakdown:

  • flex: Activates Flexbox layout
  • items-center: Vertically aligns children within the container
  • justify-center: Horizontally aligns children
  • h-screen: Makes the container full height of the screen

Center Text in a Snap

Just use text-center on any text element:

<p class="text-center text-gray-700">This paragraph is centered.</p>
Enter fullscreen mode Exit fullscreen mode

Perfect for headings, paragraphs, or call-to-actions inside cards or sections.

Pro Centering Tips

Once you're comfortable with flex and mx-auto, try these advanced tricks to make your layouts more flexible and elegant:

1. Use grid place-items-center for Clean Full Centering 

<div class="grid place-items-center h-screen"> <div class="bg-white p-4 rounded shadow">Centered with Grid!</div> </div>
Enter fullscreen mode Exit fullscreen mode
  • place-items-center is a shorthand for centering both horizontally and vertically with CSS Grid — fewer classes, same effect.

2. Center Using Absolute Positioning 

<div class="relative h-screen"> <div class="absolute inset-0 m-auto w-64 h-32 bg-blue-200"> I'm centered with absolute positioning! </div> </div>
Enter fullscreen mode Exit fullscreen mode
  • inset-0: Applies top/right/bottom/left: 0
  • m-auto: Centers the element inside its absolute context

3. Responsive Centering with min-h-screen 

<div class="min-h-screen flex items-center justify-center"> <div class="bg-white p-6 rounded">Responsive height centered!</div> </div>
Enter fullscreen mode Exit fullscreen mode
  • This is ideal when content may grow beyond the viewport.

4. Inline Icons or Badges with inline-flex 

<span class="inline-flex items-center justify-center w-10 h-10 bg-blue-500 text-white rounded-full"> + </span>
Enter fullscreen mode Exit fullscreen mode
  • Use when centering buttons or icons within lines of text.

5. Nesting Flex for Deep Layouts 

<section class="flex items-center justify-center min-h-screen bg-gray-200"> <div class="flex items-center justify-center w-64 h-64 bg-white rounded shadow"> Nested centering! </div> </section>
Enter fullscreen mode Exit fullscreen mode
  • Works well in complex UI hierarchies.

6. Align Only a Child with self-center 

<div class="flex h-64 bg-gray-100"> <div class="self-center bg-white p-4 rounded">Only I’m vertically centered</div> </div>
Enter fullscreen mode Exit fullscreen mode
  • Great for aligning specific children in a multi-item flex row.

7. Center Images in Fixed Boxes 

<div class="w-32 h-32 flex items-center justify-center bg-blue-100"> <img src="icon.svg" class="w-12 h-12" /> </div>
Enter fullscreen mode Exit fullscreen mode
  • Ensures icons, logos, or images stay centered in fixed containers.

Summary Table

Task Tailwind Class
Horizontally center a block mx-auto
Center both vertically & horizontally flex items-center justify-center
Full viewport height container h-screen / min-h-screen
Center text text-center
Grid-based centering grid place-items-center
Absolute positioning method absolute inset-0 m-auto
Center a child in flex self-center

Coming Up Tomorrow

In Day 2, we’ll explore Tailwind’s powerful color system — how to use semantic class names like bg-blue-500, how colors behave on hover, and how to build consistent UI palettes with zero custom CSS.

If you found this helpful, consider bookmarking the series or sharing it with someone learning Tailwind!

Let’s keep it simple, useful, and consistent — one day at a time.

Top comments (0)