Dhairya Shah
Dhairya Shah's Blog

Dhairya Shah's Blog

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

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

Dhairya Shah's photo
Dhairya Shah
ยทJul 27, 2022ยท

1 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

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

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

Thanks for reading!

ย 
Share this