Dhairya Shah
Dhairya Shah's Blog

Follow

Dhairya Shah's Blog

Follow
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

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