Centering a div is one of the simplest things in CSS. It is also very obvious. It is also one of those simple things in CSS that doesn’t work when you expect it to. And no matter what you try, it will try its best to not relent and not work.
And my projects are not immune to this. My centering a div fails to work the way it should. This then leads to me pausing whatever I was doing and looking for a solution, for the n-th time!!
So, I decided to write it here, so that, the next time I don’t have to go Googling again, looking for a solution.
Center a div using Classic CSS
*{
margin: 0;
}
body{
background: #7a7a7a;
}
.centerMe{
display: flex;
height: 100vh;
width: 100vw;
align-items: center;
justify-content: center;
}
That’s all that is needed on the CSS front to center a div. This is assuming the div is as follows, in the HTML page.
<div class="centerMe">
<h1>I am centered!</h1>
</div>Center a div using TailwindCSS
<div class="centerMe flex items-center justify-center h-screen w-screen">
<h1>I am centered using TailwindCSS!</h1>
</div>All you need to do is add the above-mentioned classes on the div that is to be centered. This is assuming that you have added TailwindCSS in your project.
The simplest way to add TailwindCSS to your project is to do it by referring to a CDN. The link is mentioned below:
<script src="https://cdn.tailwindcss.com"></script>
If you want to download the working version of both the approaches mentioned above, you can download the project from here.
