Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Vertical Align Content Within a Full-Screen Div Using Tailwind CSS
Centering content vertically in a full-screen div can be challenging if you are unfamiliar with Tailwind's utilities. Tailwind CSS has many utility classes, but to use them effectively, you must understand how they work and the best ways to apply them.
Approaches for Vertically Aligning Content in a Div
Tailwind CSS provides a wide range of utility classes that support effective alignment of the content within an element. We can vertically align div content in Tailwind CSS using the following approaches.
Using Flexbox
Flexbox is an easy and effective way to align content vertically. Tailwind provides utilities to easily enable and manipulate flexbox behavior. Tailwind CSS utilities such as flex, items-center, justify-center, and h-screen can do the same.
Syntax
<div class="flex items-center justify-center h-screen"> --- </div>
Example
<!DOCTYPE html>
<html>
<head>
<title>Tutorialspoint</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="flex items-center justify-center
h-screen bg-green-200">
<div class="text-center">
<h1 class="text-2xl font-bold">
Tutorialspoint
</h1>
<p>This content is vertically centered.</p>
</div>
</div>
</body>
</html>
Output
Using Grid
Grid is another simplest and most effective method to achieve vertical alignment. Grid is a great option for layouts that need more complicated alignment. Tailwind CSS utilities such as grid, place-items-center, and h-screen can do the same.
Syntax
<div class="grid place-items-center h-screen"> --- </div>
Example
<!DOCTYPE html>
<html>
<head>
<title>Tutorialspoint</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="grid h-screen place-items-center
bg-pink-200">
<div class="text-center">
<h1 class="text-2xl font-bold">
Tutorialspoint
</h1>
<p>This content is vertically centered using a grid
container.
</p>
</div>
</div>
</body>
</html>
Output
Absolute Positioning
If you can't use flexbox or grid, you can use padding, margin, and relative positioning to align things vertically. While it is less elegant, use only if Flexbox or Grid is not an option. Tailwind CSS utilities such as relative, absolute, top-1/2 and left-1/2, and transform -translate-x-1/2 -translate-y-1/2 can be used to do the same.
Syntax
<!DOCTYPE html> <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"> ... </div>
Example
<!DOCTYPE html>
<html>
<head>
<title>Tutorialspoint</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="relative h-screen bg-yellow-100">
<div class="absolute top-1/2 left-1/2
transform -translate-x-1/2 -translate-y-1/2">
<h1 class="text-2xl font-bold text-green-600">
Tutorialspoint
</h1>
<p>
This content is perfectly centered!
</p>
</div>
</div>
</div>
</body>
</html>
Output
16 Views
