Home I would like to align a container to the center horrizontally using tailwind css

Questions

I would like to align a container to the center horrizontally using tailwind css

April 7, 2023

I am using tailwind and here is the the html am working on

<div class="bg-orange-700 h-14">
  <div class="bg-blue-400 mx-auto w-40 h-4 text-center">
    Start today
  </div>
</div>

here it the whole code for the thing I am working on

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/dist/output.css" rel="stylesheet">
</head>
<body>

    <!-- this is the main container -->
    <div class="container mx-auto w-9/12 flex flex-col gap-5 items-center">
        <!-- it has three flex items, the first two are just title containers -->
        <div class="h-14 w-full items-center text-center text-4xl">Get more with Premium</div>
        <div class="h-14 w-full text-center text-lg leading-4 text-gray-600">Members enjoy a bounty of anime perks.</div>
        <div class="container mx-auto flex justify-between items-center h-screen  flex-row bg-yellow-400 ">

            <div class="flex flex-col  bg-red-950 w-96 h-5/6 border border-gray-200 rounded-lg shadow justify-evenly" >
                <div class="container bg-white w-72 h-64 mx-auto flex flex-col  gap-2 justify-between">
                    <!-- here lies the logo and amount container -->
                    <div class="bg-orange-700 h-20 w-20 mx-auto">
                      <img src="/src/img/twitter.svg">
                    </div>
                    <div class="bg-orange-700">Fan</div>
                    <div class="bg-orange-700">KES 200.00/mo</div>
                    <div class="bg-orange-700">+ APPLICABLE TAXES</div>
                    <div class="bg-orange-700 h-14">
                        <div class="bg-blue-400 mx-auto w-40 h-4 text-center">Start today</div>
                    </div>
                    <div class="bg-orange-700 basis-1">SKIP FREE TRIAL</div>
                </div>
                <div class="container bg-white w-72 h-64 mx-auto ">

                </div>
            </div>
            <div class="flex flex-col bg-green-950 w-96 h-5/6 border border-gray-200 rounded-lg shadow justify-evenly">
                <div class="container bg-white w-72 h-64 mx-auto flex flex-col">
                    <!-- here lies the logo and amount container -->
                    <div>hello</div>
                    <div>hello</div>
                    <div>hello</div>
                    <div>hello</div>
                    <div>hello</div>
                    <div>hello</div>

                </div>
                <div class="container bg-black w-72 h-64 mx-auto ">

                </div>
            </div>
            <div class="flex flex-col bg-blue-950 w-96 h-5/6 border border-gray-200 rounded-lg shadow justify-evenly">
                <div class="container bg-black w-72 h-64 mx-auto">
                    <!-- here lies the logo and amount container -->


                </div>
                <div class="container bg-black w-72 h-64 mx-auto ">

                </div>
            </div>
          </div>
    </div>
  
</body>
</html>

I would like the blue container to be at the center of the red container horizontally. I am using tailwind and would like the component name that would make it align at the center.

>Solution :

.items-center or align-items: center; is useless without flex.

You will have to add .flex in order for it to be centered on the y-axis.

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

<div class="bg-orange-700 h-14 flex items-center">
  <div class="bg-blue-400 mx-auto w-40 h-100 text-center">
    Start today
  </div>
</div>