How to Vertically and Horizontally Align Flexbox to Center

Centering content — both vertically and horizontally — is one of the most common layout tasks in web development. With Flexbox, you can achieve this easily using just a few CSS properties or utility classes like those in Tailwind CSS.

In this post, you’ll learn how to vertically and horizontally center elements using Flexbox, along with real-world examples and best practices.

Table of Contents

🎯 Why Use Flexbox for Centering?

Flexbox (Flexible Box Layout) is designed for one-dimensional layouts, meaning it works along a single axis (horizontal or vertical). But with a simple combination of properties, you can align content to the exact center of the container — both vertically and horizontally.

✅ Basic Flexbox Centering (Vertical + Horizontal)

Here’s the simplest setup to center an item using Flexbox:

🧩 HTML:

<div class="container">
  <div class="center-me">I'm centered!</div>
</div>

🎯 CSS:

.container {
  display: flex;
  justify-content: center; /* Horizontal alignment */
  align-items: center;     /* Vertical alignment */
  height: 100vh;           /* Full viewport height */
  background-color: #f3f3f3;
}

🧠 Explanation:

display: flex: Enables Flexbox layout.
justify-content: center: Centers items horizontally.
align-items: center: Centers items vertically.
height: 100vh: Makes the container as tall as the full screen for visual centering.

✅ Result: The child element is perfectly centered in the container.

📦 Full Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Flexbox Center</title>
  <style>
    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background: #e2e8f0;
    }
    .center-me {
      padding: 20px 40px;
      background: white;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="center-me">I am centered</div>
  </div>
</body>
</html>

✅ Using Tailwind CSS

If you’re using Tailwind CSS, the same layout becomes extremely concise:

<div class="flex justify-center items-center h-screen bg-gray-100">
  <div class="p-6 bg-white rounded shadow">I am centered</div>
</div>

✅ Key Tailwind Classes:

flex: Enable Flexbox.
justify-center: Horizontal centering.
items-center: Vertical centering.
h-screen: Full viewport height.

✅ Common Use Cases

Use Case	Flexbox Setup
Centering a modal	`justify-center items-center h-screen`
Centering a button	`justify-center items-center` with fixed size
Centering in a card	`flex` layout inside a card container

🧠 Tips for Perfect Flex Centering

Always apply height (e.g., 100vh or fixed value) to the Flex container if you want vertical centering.
Works well with one or multiple child elements.
Combine with flex-col if you want vertical stacking and centering.

✅ Summary

To vertically and horizontally center an element using Flexbox:

CSS Version:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Tailwind CSS Version:

<div class="flex justify-center items-center h-screen">...</div>

With Flexbox, centering is no longer a chore — it’s fast, flexible, and works across all modern browsers.