CSS: How to Center a div – Horizontally, Vertically, and Both

Centering a <div> is one of the most common layout tasks in CSS. Whether you’re creating a modal, card, or a container with important content, centering it properly ensures great visual balance on your web page.

In this blog, we’ll explore different ways to center a <div> using CSS—horizontally, vertically, and both, using modern and browser-friendly methods.

✅ Method 1: Center a <div> Horizontally with margin: auto

This is the classic way to center a block-level <div> horizontally.

🔹 HTML:

<div class="center-box">I am centered horizontally</div>

🔹 CSS:

.center-box {
  width: 300px;
  margin: 0 auto;
  background-color: #f5f5f5;
  padding: 20px;
  text-align: center;
}

Tip: The width must be set for margin: auto to work effectively.

✅ Method 2: Center a <div> Using Flexbox (Both Horizontally and Vertically)

🔹 HTML:

<div class="flex-container">
  <div class="center-box">I’m centered</div>
</div>

🔹 CSS:

.flex-container {
  display: flex;
  justify-content: center;  /* Horizontal */
  align-items: center;      /* Vertical */
  height: 100vh;            /* Full screen height */
}

.center-box {
  padding: 20px;
  background: #dff0d8;
}

Result: The inner <div> is centered in the middle of the screen.

✅ Method 3: Center Using Grid

CSS Grid makes centering even more concise:

🔹 CSS:

.grid-container {
  display: grid;
  place-items: center;
  height: 100vh;
}

This method centers any content in both directions with just one line: place-items: center.

✅ Method 4: Absolute Positioning with Transform

Works well for modals or popup elements.

🔹 CSS:

.center-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #f9f9f9;
  padding: 20px;
}

🔹 Notes:

  • This method removes the element from normal document flow.
  • Use position: relative on a parent if needed.

✨ Bonus: Tailwind CSS Example

<div class="flex justify-center items-center h-screen">
  <div class="bg-blue-100 p-6 rounded">Centered Div</div>
</div>

Tailwind makes centering even easier with utility classes.

✅ Summary

GoalMethod
Horizontal onlymargin: 0 auto;
Full center (modern)Flexbox: justify + align
Full center (concise)Grid: place-items: center;
Full center (absolute)position + transform

Conclusion

Centering a <div> is no longer a hassle thanks to modern CSS techniques like Flexbox and Grid. Depending on your layout needs—whether you want to center it inside a section or across the full viewport—you have multiple clean, efficient ways to do it.

Choose the method that best fits your layout scenario and browser support needs.

Sharing Is Caring:

Leave a Comment