Tag: center modal

How to center an element in full screen with Tailwind CSS

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 🙂