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 =
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 =
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
Share your thoughts in the comments
Please Login to comment...