Jul 27th, 2022

How to center a div in CSS & Tailwind CSS

Author Picture

Dhairya Shah

Software Engineer

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,

Let’s start with the basics first,

Vanilla CSS

  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


In this article, you have learned,

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!