How to Align Form Elements to Center using Tailwind CSS?

Last Updated : 18 Oct, 2024

Form elements are parts of a webpage that let users enter information. They include things like text boxes, checkboxes, radio buttons, dropdown menus, and buttons. To center form elements using Tailwind CSS, use classes like flex, items-center, and justify-center on a parent container.

These are the following approaches to align form elements to the center using Tailwind CSS:

Table of Content

Using Flexbox
Using Grid

Using Flexbox

Using Flexbox in Tailwind CSS makes it easy to center form elements. First, wrap your form elements in a div to create a flex container. Then, apply to classes like flex, items-center, and justify-center to center them both vertically and horizontally. Finally, use flex-col if you want the elements to stack vertically.

Syntax:

<div class="flex flex-col justify-center items-center">
    ....
</div>

Example: In this example, we will align form elements to the center using flexbox alignment.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Centered Form with Flexbox</title>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
</head>

<body class="h-screen flex justify-center items-center"> 
    <div class="flex flex-col items-center"> 
        <p class="text-green-700 text-xl mb-3">
            Welcome
        </p>

        <form class="flex flex-col gap-2 w-full max-w-xs">
            <input 
                aria-label="Enter your email address" 
                type="text" 
                placeholder="Email address" 
                class="
                text-sm text-gray-base py-5 px-4 border border-gray-200 rounded" />
                
            <input 
                aria-label="Enter your password" 
                type="password" 
                placeholder="Password"
                class="text-sm text-gray-base py-5 px-4 border
                       border-gray-200 rounded" />

            <button 
                type="submit"
                class="bg-green-400 w-full mt-4">
                Login
            </button>
        </form>
    </div>
</body>
</html>

Output:

Output

Using Grid

Using Grid in Tailwind CSS makes it easy to center form elements. First, wrap your form in a div to create a grid container. Then, apply the classes grid and place-items-center to center the items. Finally, use the h-screen to make sure the grid takes the full height of the screen.

Example: In this example we will align form elements to center using grid layout

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Centered Form with Grid Layout</title>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
</head>

<body class="h-screen grid place-items-center">
    <div class="text-center">
        <p class="text-green-700 text-xl mb-3">
            Welcome
        </p>

        <form class="grid gap-2 w-full max-w-xs">
            <input aria-label="Enter your email address" 
                   type="text" 
                   placeholder="Email address" 
                   class="text-sm text-gray-base py-5
                          px-4 border border-gray-200 rounded" />

            <input aria-label="Enter your password"
                   type="password" 
                   placeholder="Password" 
                   class="text-sm text-gray-base py-5 
                          px-4 border border-gray-200 rounded" />

            <button type="submit" class="bg-green-400 w-full mt-4">
                Login
            </button>
        </form>
    </div>
</body>

</html>