How To Center An Absolute Element In TailwindCSS?

Last Updated : 16 Aug, 2024

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 :

Table of Content

Centering with Flexbox
Centering with top-1/2 and left-1/2
Centering with Grid Layout

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.

HTML

<!DOCTYPE html>

<head>
    <title>Center Absolute Element - Flexbox</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/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

OP1 — Center An Absolute Element In TailwindCSS

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.

HTML

<!DOCTYPE html>

<head>
    <title>Center Absolute Element - Top/Left</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/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

OP2 — Center An Absolute Element In TailwindCSS

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.

HTML

<!DOCTYPE html>

<head>
    <title>Center Absolute Element - Grid</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/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>