The easiest way to center a DIV with Vanilla CSS & Tailwind CSS

Hello folks, one of the most common questions related to web development that is asked on Google is How to center a div?

And today, I will answer that question with just a single line of code.

So, how to center a div?

Here, I will discuss two different methods to center a DIV,

• Vanilla CSS
• Tailwind CSS

Let's start with the basics first,

Vanilla CSS

.container{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

This little block of code has answered the most searched question. You have centered a DIV. Tada 🎉

Tailwind CSS

If you know, Tailwind CSS then it's a one-liner solution, here's how you do that,

<div class="flex justify-center items-center min-h-screen">
  Hello world
</div>

Conclusion

In this article, you have learned,

• Centering DIV with Vanilla & Tailwind CSS

I hope this article was worth reading. Please do consider a like and share it with your colleagues and friends.

Consider buying me a coffee

Let's connect

• Twitter - @codewithsnowbit
• GitHub - @codewithsnowbit

Thanks for reading!