How to Fixed an Element to Center in Tailwind CSS ?

Last Updated : 06 Jun, 2023

Tailwind CSS is a utility-first CSS library that provides developers to build responsive and customizable user interfaces/Front-end. Tailwind CSS is the best way to write your code in an inline style. You don’t need to write a single line of your CSS code you need to write only tailwind utility classes. In this article, we will see how to center the Fixed Elements using Tailwind CSS.

Centering the elements on a webpage or any other application is a very common task in website development. Here is the most popular utility-first CSS framework that is Tailwind CSS. If we want to center a fixed element we can use the ‘mx-auto’ class in Tailwind CSS. This utility class can be applied to any element with a fixed width. By default, the ‘mx-auto’ utility class center an element within its parent container. If you want to center your element vertically, the ‘flex’ and ‘items-center’ utility classes can be used.

Syntax:

<div class="fixed inset-0 flex items-center justify-center">
    <div class="bg-white rounded-lg p-6 text-green-600">
        GeeksforGeeks 
    </div>
</div>

Approaches: The different approaches you can use to center an element in Tailwind CSS are given below:

Using “mx-auto”: When we use the ‘mx-auto’ utility class, then this class will center an element horizontally. The “mx-auto” class centers the element horizontally within its parent container by setting the left and right margins of the element to “auto.”

Example 1: In this example, we are centering the fixed element using ‘mx-auto’.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
          Center Fixed Element with Tailwind CSS 
      </title> 
    <script src= 
"https://cdn.tailwindcss.com"> 
      </script> 
</head> 
  
<body> 
    <div class="flex h-screen items-center"> 
        <h3 class="mx-auto">GeeksforGeeks</h3> 
    </div> 
</body> 
  
</html>

Output:

Using “items-center”: When we use the “flex” and “items-center” utility classes, it will 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.

Example 2: In this example, we are centering the fixed element using ‘items-center’.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
          Center Fixed Elements using Tailwind CSS 
      </title> 
    <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"> 
              GeeksforGeeks 
          </p> 
    </div> 
  
</body> 
  
</html>

Output:

Example 3: Here is an example of how to center fixed elements in Tailwind CSS. In this 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> 
    <title>Tailwind CSS Responsive Breakpoints Example 2</title> 
    <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>

Output:

Example 4: This is another illustration of how to center a fixed element in Tailwind CSS.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <script src= 
"https://cdn.tailwindcss.com"> 
      </script> 
</head> 
  
<body> 
    <div
        class="fixed top-0 left-0 w-full h-full  
               flex items-center justify-center 
               bg-gradient-to-r from-purple-700 to-blue-600"> 
        <div class="bg-white p-6 rounded-lg  
                    shadow-lg text-center"> 
            <h1 class="text-green-600 text-5xl  
                       font-bold text-center my-5"> 
                GeeksforGeeks 
            </h1> 
            <h2 class="text-3xl font-bold mb-4  
                       text-gray-900"> 
                  Welcome to Our Site 
              </h2> 
            <p class="text-lg text-gray-700 mb-6"> 
              GeeksforGeeks is a Computer Science portal for geeks.  
              It contains well written, well thought and well  
              explained computer science and programming articles. 
              </p> 
            <button class="bg-blue-600 text-white py-2 px-4  
                           rounded-lg hover:bg-blue-700"> 
                  Learn More 
              </button> 
        </div> 
    </div> 
</body> 
  
</html>

Explanation: The top-0, left-0, w-full, and h-full classes are fixed on the outer div. The inner div is centered and has the class items-center and flex. The bg-gradient-to-r produces a background with a purple-to-blue gradient. The inner div has a drop shadow, rounded corners, and a white background. text-gray-900 and mb-4 style heading; text-lg and text-gray-700 style paragraph; text-center centers content. Text-white, hover:bg-blue-700, py-2, px-4, and rounded-lg classes were used to style the button.

Output: