In TailwindCSS, aligning elements to the centre involves using different positioning strategies. By using utilities like flex, grid, and positioning classes such as absolute, top-1/2, and left-1/2, you can achieve precise centring of elements within their containers.
These are some ways to Center an absolute element in TailwindCSS :
1. Centering with Flexbox
In this approach, we are using Flexbox to centre the button within a relatively positioned container. By applying absolute positioning and inset-0 to the button's container, it stretches to cover the entire parent, while flex, items-centre, and justify-centre make sure the button is perfectly centred both vertically and horizontally.
Syntax:
class="absolute inset-0 flex items-center justify-center"Example: The below example uses Flexbox in TailwindCSS to center an absolute element.
<!DOCTYPE html>
<head>
<title>Center Absolute Element - Flexbox</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
<div class="relative w-80 h-80 text-white">
<h1 class="text-4xl text-green-500 text-center mt-8">
GeeksforGeeks
</h1>
<h3 class="text-xl text-gray-700 text-center">
Approach 1: Centering with Flexbox
</h3>
<div class="absolute inset-0 flex items-center justify-center">
<button class="bg-yellow-400 text-gray-800 px-6 py-3
rounded-lg shadow-md hover:bg-yellow-300">
Click Me
</button>
</div>
</div>
</body>
</html>
Output
2. Centering with top-1/2 and left-1/2
In this approach, we are using top-1/2 and left-1/2 to position the element at the center of its relatively positioned container. The transform -translate-x-1/2 -translate-y-1/2 classes then adjust the element's position to make sure it is perfectly centered, offsetting the element's own width and height.
Syntax
class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"Example: The below example uses top-1/2 and left-1/2 classes in TailwindCSS to center an absolute element.
<!DOCTYPE html>
<head>
<title>Center Absolute Element - Top/Left</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
<div class="relative w-64 h-64 text-white">
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center">
<h1 class="text-4xl text-green-500 mb-4">GeeksforGeeks</h1>
<h3 class="text-xl text-gray-700 mb-4">Approach 2: Centering with top-1/2 and left-1/2</h3>
<p class="bg-red-500 p-4 rounded">Centered with Top/Left</p>
</div>
</div>
</body>
</html>
Output
3. Centering with Grid Layout
In this approach, we are using CSS Grid to center an element within a container. By applying grid and place-items-center to the container, we use Grid's place-items shorthand to center the child element both horizontally and vertically.
Syntax:
class="relative w-80 h-80 bg-purple-500 text-white grid place-items-center"Example: The below example uses Grid in TailwindCSS to center an absolute element.
<!DOCTYPE html>
<head>
<title>Center Absolute Element - Grid</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
<div class="relative w-80 h-80 text-white grid place-items-center">
<div class="absolute">
<h1 class="text-4xl text-green-500 text-center mb-4">GeeksforGeeks</h1>
<h3 class="text-xl text-gray-700 text-center mb-4">
Approach 3: Centering with Grid Layout</h3>
<div class="bg-orange-300 p-6 rounded-lg
shadow-lg border-4 border-red-600">
<h2 class="text-xl text-yellow-700">Centered Content</h2>
<p class="text-gray-800">Grid layout.</p>
</div>
</div>
</div>
</body>
</html>
Output
