After a lot of system administration and backend programming stuffs on this blog, let’s check some experiences with frontend and designing.
Tailwind is my favorite most used CSS framework. A common thing, I face on centering an element on the screen. There are a couple of ways to do it. First, we can actually use flex and horizontal and vertical center to put the element in the center, and use h-screen to take the height of full screen like following:
<div class="h-screen flex justify-center items-center">
<div>
Element on the center of the screen
</div>
</div>
There are other ways to do it as well. You can set the flex and h-screen to the container, and m-auto to allow margin to put your inside element center of the screen, like the following:
<div class="h-screen flex">
<div class="m-auto">
Element on the center of the screen
</div>
</div>
Then, you probably want to put the content as a modal. To use the modal, you need to set the position absolute. Here is how you may do this:
<div class="relative">
<div class="absolute inset-0 h-screen flex">
<div class="m-auto">
Element on the center of the screen
</div>
</div>
</div>
or like the following:
<div class="relative">
<div class="absolute inset-0 h-screen flex justify-center items-center">
<div>
Element on the center of the screen
</div>
</div>
</div>
Hope this helps to someone, and myself specially when I forget after a while, on how to create a center modal in Tailwind 🙂