How to Fixed an Element to Center in Tailwind CSS?

Last Updated : 15 Nov, 2024

Here are two different methods to center an elementwith Tailwind CSS.

1. Using mx-auto Class

We can use the 'mx-auto' utility class to center an element horizontally. The "mx-auto" class centers an element horizontally within its parent container by setting the left and right margins of the element to "auto."

HTML

<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
    <div class="flex h-screen items-center">
        <h3 class="mx-auto">CODE WORLD</h3>
    </div>
</body>

</html>

Output

2. Using items-center Class

We can use the "flex" and "items-center" utility classes to center an element vertically. The "items-center" class centers the child element vertically within the parent container, and the "flex" class transforms the parent container into a flex container.

HTML

<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
    <div class="fixed top-0 left-0 w-screen h-screen flex 
                items-center justify-center">
        <p class="text-black text-2xl">
            CODE WORLD
        </p>
   	</div>
</body>

</html>

Output

Example: The fixed container is positioned at the top-left of the viewport with a width and height of 100%, using the fixed, top-0, left-0, w-full, and h-full classes. The flex, items-center, and justify-center classes are applied to center the content of the fixed container both vertically and horizontally.

HTML

<!DOCTYPE html>
<html>

<head>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" 
          rel="stylesheet">
</head>

<body>
    <div class="fixed top-0 left-0 w-full h-full 
                flex items-center justify-center">
        <div class="bg-white p-6 rounded-lg shadow-lg">
            <h1 class="text-red-500 text-5xl
                       font-bold text-center my-5">
                Google
            </h1>
            <p class="text-gray-600">
                Thanks for visiting this site. Please feel free
                to explore and let me know if you have any questions.
            </p>
        </div>
    </div>
</body>

</html>