How to align form elements to center using Tailwind CSS ?

12 May, 2021
You can easily align form elements in the center using flex property in Tailwind CSS. Tailwind uses justify-center and items-center property which is an alternative to the flex-property in CSS. 
Syntax:
<div class="flex flex-col justify-center items-center">
    ....
</div>
flex property:
flex-col: This property stacks the flex items column-wise.
justify-center: This property aligns the flex items in the center in the vertical direction when the flex items are column-wise stacked.
items-center: This property aligns the flex items in the center in a horizontal direction when the flex items are stacked column- wise.
Note: When flex items are stacked row-wise then, the justify-content property aligns the flex items in the center in the horizontal direction and the items-center property aligns the flex items in the center in the vertical direction. 
Important Concept: Whenever you flip the direction of your flex, then you are also flipping both horizontal alignment ( justify-{alignment} ) and vertical alignment ( items-{alignment} ). So justify-{alignment} is in horizontal direction if flex is in the row direction. When the flex is in the column direction then justify-{alignment} is in vertical direction. 
 It’s inverse for items-{alignment} i.e it is vertical direction as long as the flex is in row-direction otherwise it is horizontal in the column-direction.
Note: It is important to give the proper height to the container in order to align form or flex in the center in both horizontal and vertical direction i.e h-screen ( make an element to span the entire height of the viewport ) because by default all container take up their entire width, but they don’t take up their entire height. 
It is important to change the height of the screen.
Example 1:
HTML
<!DOCTYPE html><html>    <head>        <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"               rel="stylesheet" />    </head>      <body>        <div class="h-screen flex flex-col                     items-center justify-center">            <p class="text-green-700 text-xl mb-3">              Welcome to GeeksforGeeks            </p>              <form>                <input aria-label="Enter your email address"                        type="text" placeholder="Email address"                        class="text-sm text-gray-base w-full                               mr-3 py-5 px-4 h-2 border                               border-gray-200 rounded mb-2" />                <input aria-label="Enter your password"                        type="password" placeholder="Password"                       class="text-sm text-gray-base w-full mr-3                               py-5 px-4 h-2 border border-gray-200                               rounded mb-2" />                  <button type="submit"                        class="bg-green-400 w-full mt-4">                    Login                </button>            </form>        </div>    </body></html>
Output:
Example 2: 
HTML
<!DOCTYPE html><html><head>    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"        rel="stylesheet"></head>  <body >      <div class="h-screen flex flex-col items-center               justify-center border  rounded">          <p class="text-green-700 text-xl mb-3 ">            Welcome to GeeksforGeeks          </p>            <form >            <label class="text-gray-500">               Select Course            </label>             <select class="form-select mt-1 w-full">                <option>Data Structure</option>                <option>Operating System</option>                <option>Web Development</option>                <option>Competitive Programming</option>              </select>            </label>              <label class=" mt-4">              <span class="text-gray-500">                Requested Limit              </span>              <select class="form-select                             mt-1 block w-full">                <option>$20</option>                <option>$25</option>                <option>$15</option>                <option>$10</option>              </select>            </label>              <button               type="submit"              class="bg-green-400 w-full mt-4">              Confirm            </button>          </form>        </div>  </body>  </html>
Output:
Picked
Tailwind CSS
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.