CODEWITHSUNDEEP
tailwind-css
maxcountryman
maxcountryman

Reputation: 1779

How can I vertically center this "Content" div with TailwindCSS?

I'd like to vertically center the div containing "Content" here using TailwindCSS and without resizing the width of the div:

<div class="flex h-screen min-h-full flex-col justify-center bg-gray-100">
  <header class="h-10 bg-blue-600 text-white">
    <div class="mx-auto max-w-7xl py-3 px-3 sm:px-6 lg:px-8">
      <div class="pr-16 sm:px-16 sm:text-center">
        <p class="font-small text-white"><span class="md:inline">Header.</span></p>
      </div>
    </div>
  </header>

  <main class="flex-grow place-content-center">
    <div class="mx-auto max-w-6xl pb-10 lg:py-12 lg:px-8">
      <div class="space-y-6 sm:px-6 lg:col-span-12 lg:px-0">
        <div class="min-w-0 flex-1">
          <div class="shadow sm:overflow-hidden sm:rounded-md">
            <div class="bg-white px-4 py-6 sm:p-6">Content.</div>
          </div>
        </div>
      </div>
    </div>
  </main>
</div>

Here's an example of what this currently looks like: https://play.tailwindcss.com/whHEd0QsMB.

How can this div be vertically centered such that it doesn't change the width sizing behavior of the div?

Upvotes: 5

Views: 12636

Answers (3)

krishnaacharyaa
krishnaacharyaa

Reputation: 25140

TailwindCss works on the mobile-first design. Your style is mostly inspired from bootstrap.

Unsure about your experience with tailwindCss. I want to attempt to clearly convey the concept i have understood with my experience instead of just answering. Hope it helps.

As said above . Tailwind works on mobile first design, meaning any design you build is assumed to work on the mobile , and then for medium and larger devices appropriate tweeks are to be done. So px-4 md:px-6 lg:px-8 is preferred over px-6 sm:px-4 lg:px-8 unless you want to be very specific with the design below sm: i.e mobile design

And if you are targetting design for devices of size between sm to md , you'll have to use sm: then.

Let's understand even further with the solution to the problem you are facing.

I have kept things simple. So that i concentrate more on the concept rather than just the code and for simplicity we'll consider we are focusing on just the mobile devices i.e anything less than md: and anything above the md: with different design.

The code goes like:

<div>
 <div className="flex h-screen flex-col bg-gray-100">
    <header className="text-white text-center bg-blue-600 m-4 md:m-2">
       Header
    </header>
    <main className="  flex flex-1 justify-center items-center">
      <div className="shadow bg-white rounded-md p-6 md:p-2 w-full text-center">
        Content
      </div>
    </main>
 </div>
</div>

The code logic:

  • The entire display type is set to flex and made it flex-col because by default it is flex-row
  • Inside which there are two items header and main
  • And to align the just a text to the center we use text-center
  • By default childrens of flex take just the height of its child, so to give the main complete height we use flex-1 property to fill the entire available in parent space.
  • justify-center and items-center is to center all the children inside the main , in our case it is Content
  • You can ignore the responsive design , i had put it to understand the tailwindcss's responsive design better.

For medium size devices:

  • header with margin of m-2
  • content with padding of p-2 enter image description here

For every devices less than medium size

  • header with margin of m-4
  • content with padding of p-6 enter image description here

Hope it helps !!

Upvotes: 3

noevidenz
noevidenz

Reputation: 160

I think you can add flex flex-col to the main element, and add w-full to it's direct descendant.

Here's an example: https://play.tailwindcss.com/kH7OIe6r8x

It seems that once flex is added to the parent container, the content element collapses because it has no minimum width and there isn't enough content in the example to force it's width to expand.

Upvotes: 5

Md Rathik
Md Rathik

Reputation: 86

I think this code can help you, cause you are giving h-screen in parent div which is related to header and main div & that's created complexity to make second div in middle.

However, use h-screen in main content div, which will set into middle according to your need. please check this snippets https://play.tailwindcss.com/6M7jbrCZ78

   <div class="flex min-h-full flex-col bg-gray-200">
  <header class="h-10 bg-blue-600 text-white">
    <div class="mx-auto max-w-7xl py-3 px-3 sm:px-6 lg:px-8">
      <div class="pr-16 sm:px-16 sm:text-center">
        <p class="font-small text-white"><span class="md:inline">Header.</span></p>
      </div>
    </div>
  </header>

  <main class="flex h-screen w-full place-content-center items-center">
    <div class="mx-auto w-full max-w-6xl pb-10 lg:py-12 lg:px-8">
      <div class="space-y-6 sm:px-6 lg:col-span-12 lg:px-0">
        <div class="min-w-0 flex-1">
          <div class="shadow sm:overflow-hidden sm:rounded-md">
            <div class="bg-white px-4 py-6 sm:p-6">Content.</div>
          </div>
        </div>
      </div>
    </div>
  </main>
</div>

Upvotes: 0

Related Questions