CODEWITHSUNDEEP
htmlcssuser-interfacetailwind-css
ajthinking
ajthinking

Reputation: 4538

Vertical align with Tailwind CSS across full screen div

How can I vertically align a div with Tailwind? What I want:

-----------------------------------
|                                |
|                                |
|                                |
|             item1              |
|             item2              |
|                                |
|                                |
|                                |
-----------------------------------

What I currently have:

-----------------------------------
|             item1              |
|             item2              |
|                                |
|                                |
|                                |
|                                |
|                                |
|                                |
-----------------------------------


.bgimg {
  background-image: url('https://d1ia71hq4oe7pn.cloudfront.net/photo/60021841-480px.jpg');
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css">
<div class="flex flex-col h-screen my-auto items-center bgimg bg-cover">
  <h3 class="text-white">heading</h3>
  <button class="mt-2 bg-white text-black font-bold py-1 px-8 rounded m-2">
    call to action
  </button>
</div>

I have successfully centered on the secondary axis (left-right) with class items-center. Reading the documentation, I tried align-middle but it does not work. I have confirmed the divs have full height and my-auto.

I'm using this version of Tailwind: https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css

Here is a JSFiddle: https://jsfiddle.net/7xnghf1m/2/

Upvotes: 162

Views: 338240

Answers (14)

Lasitha Lakmal
Lasitha Lakmal

Reputation: 880

Try this solution

<p className='place-items-center flex'>Yout text</p>

Upvotes: 1

krishnaacharyaa
krishnaacharyaa

Reputation: 24912

I have tried to summarize different occurrences of centering the divs

Center divs in Column

For fit width
  <div class="bg-yellow-400 flex flex-col h-screen justify-center items-center">
    <div className="bg-green-500 p-2">item 1</div>
    <div className="bg-pink-500 p-2">item 2</div>
  </div>

enter image description here

For full width
  <div class="bg-yellow-400 flex flex-col h-screen justify-center items-center">
    <div className="bg-green-500 p-2 w-full flex justify-center">
      item 1
    </div>
    <div className="bg-pink-500 p-2 w-full text-center">item 2</div>
  </div>

enter image description here

Extra:

Center vertically split divs
<div class="flex h-screen flex-col">
  <div class="flex flex-1 items-center justify-center bg-green-500 p-2 text-4xl">
    <div class="bg-yellow-400 p-6">Item 1</div>
  </div>
  <div class="flex flex-1 items-center justify-center bg-pink-500 p-2 text-4xl"><div class="bg-amber-400 p-6">Item 2</div></div>
</div>

enter image description here

Center horizontally split divs
<div class="flex h-screen">
  <div class="flex flex-1 items-center justify-center bg-green-500 p-2 text-4xl">
    <div class="bg-yellow-400 p-6">Item 1</div>
  </div>
  <div class="flex flex-1 items-center justify-center bg-pink-500 p-2 text-4xl"><div class="bg-amber-400 p-6">Item 2</div></div>
</div>

enter image description here

Center divs in Row

For fit height

<div>
  <div class="flex h-screen items-center justify-center bg-yellow-400">
    <div class="flex justify-center bg-green-500 p-2">item 1</div>
    <div class="bg-pink-500 p-2 text-center">item 2</div>
  </div>
</div>

enter image description here

For full height

<div>
  <div class="flex h-screen items-center justify-center bg-yellow-400">
    <div class="flex h-full items-center bg-green-500 p-2">item 1</div>
    <div class="flex h-full items-center bg-pink-500 p-2">item 2</div>
  </div>
</div>

enter image description here

Upvotes: 41

panjeh
panjeh

Reputation: 1398

A-1 - Solution: Flexbox

Considering Flexbox and only using the classes provided by TailwindCss without adding a new div element:

<div class="flex flex-col items-center justify-center h-screen">
  <h3>title</h3>
  <button>button</button>
</div>

check the result here: https://play.tailwindcss.com/HZIvf53Rcv

A-2 - Solution: CSSgrid

Besides Flexbox we have another choice that is CSSgrid using the classes provided by TailwindCss:

  • grid : To create a grid container. Doc
  • h-screen : To size the container-height to the viewport height.
  • justify-items-center : is equivalent to justify-items: center; in CSSgrid and it is centering grid items inside their grid track along the horizontal axis. - Doc
  • items-center : is equivalent to align-items: center; in CSSgrid and it is aligning the items inside their grid track to center along the vertical axis - Doc
<div class="grid justify-items-center items-center h-screen">
  <div>
    <h3>title</h3>
    <button>button</button>
  </div>
</div>

check the result here: https://play.tailwindcss.com/UtW8Gmbvsk

B-2 - Shorthand: CSSgrid

There is a shorthand property in CSSgrid when you want to justify and align items with only one property, that is place-items.

place-items: vertical-value(align) horizontal-value(justify);

When both values vertical and horizontal are the same you can provide a single value.

place-items: vertical-horizontal-value;

In TailwindCSS there is a class for this. place-items-center which is equivalent to place-items: center; in CSS.

Hence if you want to use only one class for this aim you should do this:

<div class="grid h-screen place-items-center">
  <div>
    <h3>title</h3>
    <button>button</button>
  </div>
</div>

check the result here: https://play.tailwindcss.com/jxIbYWN9Ad

Upvotes: 7

Philipp John
Philipp John

Reputation: 332

The best thing that worked for me was:

<div className="m-auto">
    <div className="text-center">

      <h3>
        Some text
      </h3>

      <button type="button">
        Some button
      </button>

    </div>
  </div>

To center multiple elements within another div with text-center

Upvotes: 1

Nartub
Nartub

Reputation: 3878

You can also do

<div class="flex h-screen">
  <div class="m-auto">
    <h3>title</h3>
    <button>button</button>
  </div>
</div>

Upvotes: 328

Gil Perez
Gil Perez

Reputation: 1125

Navigation using React

enter image description here

<nav className="flex gap-8 items-center justify-center">
  <Link className=''>SHOP</Link>
  <Link className=''>BACKPACK</Link>
</nav>

Upvotes: 5

Garbg
Garbg

Reputation: 45

you can do

<div class="flex justify-center items-center flex-col">
  <p>Item 1</p>
  <p>Item 2</p>
</div>

However, this approach requires flexbox.

Upvotes: 2

djsreeraj
djsreeraj

Reputation: 719

For vertical center in Tailwind Grid use class name:

self-center

 <div class="self-center">

Upvotes: 3

Linus Juhlin
Linus Juhlin

Reputation: 1273

Justify-Center and Items-Center

While Anders' answer solves the problem for this particular case, I think it's important to note that using justify-center and items-center is circumstantial.

Let's have a look at one of the examples from the tailwind documentation.

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>

<div class="flex justify-center bg-gray-100">
  <div class="text-gray-800 text-center bg-gray-300 px-4 py-2 m-2">1</div>
  <div class="text-gray-800 text-center bg-gray-300 px-4 py-2 m-2">2</div>
  <div class="text-gray-800 text-center bg-gray-300 px-4 py-2 m-2">3</div>
</div>

As we can see the above code centers the elements horizontally. The reason for this is because the justify-center class centers the element on the flex container's main axis.

This means that if we were to change the main axis to 'column' then we would get a different result.

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>

<div class="flex flex-col justify-center bg-gray-100">
  <div class="text-gray-800 text-center bg-gray-300 px-4 py-2 m-2">1</div>
  <div class="text-gray-800 text-center bg-gray-300 px-4 py-2 m-2">2</div>
  <div class="text-gray-800 text-center bg-gray-300 px-4 py-2 m-2">3</div>
</div>

Justify-Center and Items-Center centers the elements on the main axis and the cross axis, and they can be used in place of each other. They are the opposites of each other and will produce different results depending on what the current main axis is.

Upvotes: 40

Ameer Hamza
Ameer Hamza

Reputation: 67

I did it this way and it works.

<div class="grid grid-cols-3 h-screen">
<div class="bg-red-400 col-span-3 sm:col-span-1 flex">
    <div class="bg-blue-300 m-auto">
        <h1>hello</h1>
    </div>
</div>
<div class="col-span-3 bg-red-50 sm:col-span-2"></div>

See image

Upvotes: 1

Rizky92
Rizky92

Reputation: 85

@bastiotutuama's answer is already good, however if there are other surrounding items then use align self utilities instead of items-center. source

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>

<div class="bg-blue-500 flex justify-center h-screen">
    <div class="bg-red-300 self-start">
        <h1>
            Let us get you off the board <br>
            <span>Pursue what you wanted</span>
        </h1>
        <div class="mt-2 flex items-center">
            <a href="#" class="block bg-indigo-600 text-indigo-100 px-4 py-2 rounded text-sm uppercase tracking-wide font-semibold">Get started</a>
            <a href="#" class="block bg-gray-300 text-gray-600 px-4 py-2 rounded text-sm uppercase font-semibold">Learn more</a>
        </div>
    </div>
    <div class="bg-yellow-300 self-center">
        <h1>
            Let us get you off the board <br>
            <span>Pursue what you wanted</span>
        </h1>
        <div class="mt-2 flex items-center">
            <a href="#" class="block bg-indigo-600 text-indigo-100 px-4 py-2 rounded text-sm uppercase tracking-wide font-semibold">Get started</a>
            <a href="#" class="block bg-gray-300 text-gray-600 px-4 py-2 rounded text-sm uppercase font-semibold">Learn more</a>
        </div>
    </div>
    <div class="bg-red-300 self-end">
        <h1>
            Let us get you off the board <br>
            <span>Pursue what you wanted</span>
        </h1>
        <div class="mt-2 flex items-center">
            <a href="#" class="block bg-indigo-600 text-indigo-100 px-4 py-2 rounded text-sm uppercase tracking-wide font-semibold">Get started</a>
            <a href="#" class="block bg-gray-300 text-gray-600 px-4 py-2 rounded text-sm uppercase font-semibold">Learn more</a>
        </div>
    </div>
</div>

Upvotes: 6

bastiotutuama
bastiotutuama

Reputation: 1351

Partly referencing @mythicalcoder 's solution but using only the necessary classes provided by TailwindCss (Version 1.8.+):

  • flex : To use a flex-div as container
  • h-screen : To size the container-height to the viewport height.
  • justify-center : To justify center (horizontal center) - main axis - Doc
  • items-center : To align the items to center (horizontal center) - cross axis - Doc

My Solution to center two text lines:

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

  <div class="flex h-screen justify-center items-center">
    <div class="text-center bg-blue-400"> <!-- ⬅️ THIS DIV WILL BE CENTERED -->
        <h1 class="text-3xl">HEADING</h1>
        <p class="text-xl">Sub text</p>
    </div>
  </div>

Upvotes: 115

mythicalcoder
mythicalcoder

Reputation: 3281

According to the question, the "Items1", "Items2" should be both horizontally and vertically aligned.

Horizontal => text-center/justify-center

Vertical => items-center

Here is a sample code for producing a view similar to the ASCII image in the question.

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>

<div class="relative h-32 bg-blue-400">
  <div class="absolute inset-0 flex items-center justify-center">
    Item 1
    <br>
    Item 2
  </div> 
</div>

Upvotes: 18

ajthinking
ajthinking

Reputation: 4538

Use class justify-center to align on the main axis. align-middle operates on the cross axis.

Upvotes: 0

Related Questions