Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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:

  • h-screen: It makes an element span the entire height of the viewport because by default all containers take up their entire width, but they don’t take up their entire height.
  • justify-center: This property aligns the flex items in the center in the horizontal direction ( main-axis ) when the flex items are row-wise stacked.
  • items-center: This property aligns the flex items in the center in a vertical direction (cross-axis)  when the flex items are stacked row-wise.

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:

HTML




<!DOCTYPE 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>
  
<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:



Last Updated : 20 Jun, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads