Search code examples
cssflexboxcenteringtailwind-css

How to align a div within a div using flex and flex-col Tailwind CSS

I'm trying to vertically center the div with a white border onto the div with a green background. Colors just for show. I cannot figure out why justify-center and items-center do not work. I know I can use margin to achieve what I want but I know there's a better way. I have tried referencing this SO post but have had no luck:Reference Post

Also, if there is a better solution to implement what I want I'm all ears.

My code:

<div class="flex flex-col min-h-screen bg-coolGray-900">
    <div class="w-screen justify-center items-center h-screen bg-green-500 ">
        <div class="text-center text-white border-2 ">
            <h1 class="mb-10 text-6xl font-bold font-lato">Message Here</h1>
            <h2 class="mb-8 text-2xl font-semibold font-lato">More Detailed Message Here</h2>
            <button class="mx-auto btn btn-learn">Learn More</button>
        </div>
    </div>
</div>

enter image description here

Solution

  • You haven't displayed your container class as flex, this is why your justifies aren't working.

    • Add the class flex to your bg-green-500 class.

    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>

<section>
  <div class="flex flex-col min-h-screen bg-coolGray-900">
    <div class="flex w-screen justify-center items-center h-screen bg-green-500 ">
        <div class="text-center text-white border-2 w-screen">
            <h1 class="mb-10 text-6xl font-bold font-lato">Message Here</h1>
            <h2 class="mb-8 text-2xl font-semibold font-lato">More Detailed Message Here</h2>
            <button class="mx-auto btn btn-learn">Learn More</button>
        </div>
    </div>
  </div>
</section>