How to align div vertical across full screen in Tailwind CSS ?
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:
Please Login to comment...