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