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

20 Jun, 2021
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:
Picked
Tailwind CSS-Questions
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
Build a Survey Form using HTML and CSS
Design a web page using HTML and CSS
Form validation using jQuery
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to fetch data from an API in ReactJS ?
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array