How to align div vertical across full screen in Tailwind CSS ?

Last Updated : 18 Jul, 2024

You can easily align div vertical across the full screen using flex property in Tailwind CSS. Tailwind uses justify-center and items-center property which is an alternative to the flex-property in CSS.

Syntax:

<div class="flex h-screen justify-center items-center">
    . . .   
</div>

flex property:

CSS Class	Description
h-screen	Makes an element span the entire height of the viewport, ensuring it takes up the full vertical space available on the screen.
justify-center	Aligns flex items horizontally (along the main-axis) to the center within their container when they are stacked in a row (row-wise stacking).
items-center	Aligns flex items vertically (along the cross-axis) to the center within their container when they are stacked in a row (row-wise stacking).

Note: When flex items are stacked column-wise then, the justify-content property aligns the flex items in the center in the vertical direction and the items-center property aligns the flex items in the center in the horizontal direction.

Important Concept: Whenever you flip the direction of your flex, then you are also flipping both horizontal alignments ( justify-{alignment} ) and vertical alignment ( items-{alignment} ). So justify-{alignment} is in horizontal direction if flex is in the row direction. When the flex is in the column direction then justify-{alignment} is in the vertical direction.

It’s inverse for items-{alignment} i.e it is vertical direction as long as the flex is in row-direction otherwise it is horizontal in the column-direction.

Example 1: In this example we are using Tailwind CSS classes to create a centered, vertically aligned div inside a flex container, styled with colors and dimensions, emphasizing "GeeksforGeeks" with inline styles for green text.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
        rel="stylesheet">
</head>

<body>
    <div class="flex h-screen justify-center 
                items-center bg-green-300">
        <div class="text-center h-40 w-40 
                bg-pink-400">
            <h2 style="color:green">
                GeeksforGeeks
            </h2>
            
            <b>Align div vertically</b>
        </div>
    </div>
</body>

</html>

Output: From this example you can observe that the pink color box is aligned vertically across the full screen.

Example 2: Using m-auto to center the element. The m-auto is used to center the item both horizontally and vertically. The following example will align the div vertically and horizontally across the full screen.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
        rel="stylesheet">
</head>

<body>
    <div class="flex h-screen bg-pink-200">
        <div class="m-auto bg-green-300 ">
            <h2 style="color:green ">
                GeeksforGeeks
            </h2>
            <b> LEFT BOX</b>
        </div>
        
        <div class="m-auto bg-green-300 ">
            <h2 style="color:green ">
                GeeksforGeeks
            </h2>
            <b> RIGHT BOX</b>
        </div>
    </div>
</body>

</html>

Output:

How to Vertically Align an Image Inside a Div in CSS ?

aksrathod07

Improve

Article Tags :

How to align div vertical across full screen in Tailwind CSS ?

Similar Reads

Thank You!

What kind of Experience do you want to share?