It is quite challenging to center divs in HTML especially doing both horizontally and vertically. But in this article I'll help you!

Code Example With Explanation:

Let's say there is a div with class myDiv:

<div class="myDiv">hello dev</div>

Now let's,
Center Horizontally Using CSS:
To center this div horizontally we can use this CSS code:

.myDiv {
  padding: 0 100%;
}

In this CSS code padding: 0 100%; sets the X-axis padding to 100% (full-screen width) to center the div horizontally.

Center Vertically Using CSS:
To center this div vertically we can use this CSS code:

.myDiv {
  padding: 100% 0;
}

In this CSS code padding: 100% 0; sets the Y-axis padding to 100% (full-screen height) to center the div vertically.

Center Horizontally & Vertically Using CSS:
Now let's center it both vertically and horizontally using CSS.
Let's use this code:

.myDiv {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100% 0;
}

In this code display: flex; sets the display mode to flexbox which is important for this to work. Then justify-content: center; justifies the content to center and align-items: center; aligns the items to center. They work together to horizontally centering the div. Finally padding: 100% 0; adds 100% padding to Y-axis (full-screen height) to center the div vertically like before. Putting all together they center div vertically and horizontally.

This was all about centering divs using CSS, Learn More

Using TailwindCSS:

Yes, I can't end this article without telling you to use TailwindCSS. It's my favorite framework as it helped me a lot as a beginner.

Let's center the div using TailwindCSS,
Horizontally:
Using TailwindCSS to center a div horizontally can be done by using this code:

<div class="flex items-center">hello dev</div>

In this code the TailwindCSS class flex sets the display to flexbox and items-center centers the item horizontally.

Vertically:
Using TailwindCSS to center a div vertically can be done by using this code:

<div class="h-screen flex items-center">hello dev</div>

In this code the TailwindCSS class h-screen makes the div using full-screen height, the class flex sets the display to flexbox and items-center centers the item.

Vertically & Horizontally:

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

In this code the class h-screen makes the div using full-screen height, the class flex sets the display to flexbox, items-center centers the item and justify-center justifies the item to the center. Putting all together centers the div both vertically and horizontally.

That's all for centering divs using TailwindCSS, Learn More

Conclusion:

Centering divs can make elements in your website stand out and that's how you center a HTML div.

Make sure to practice and not fully depend on memorizing properties. Have A Nice Day :)

Hello, I am a student and I love programming. If my articles help you and you want to donate then thanks as it will support my education and help me reach my goal! Donate Nabir14