通过全屏 div 使用 Tailwind CSS 进行垂直对齐

如何垂直对齐与顺风？ 我想要的:

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

我现在拥有的:

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

超文本标示语言

<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>

CSS

.bgimg {
background-image: url('https://d1ia71hq4oe7pn.cloudfront.net/photo/60021841-480px.jpg');
}

我已经成功地以第二轴(左右)为中心与类 items-center。在阅读文档时，我尝试了 align-middle，但它不起作用。我已经确认潜水员有全高度和 my-auto。

我使用的是这个版本的“顺风”: https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css

这是一个 JSFiddle: https://jsfiddle.net/7xnghf1m/2/

180995 次浏览
小开

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

小开

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.

小开
最佳答案

You can also do

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

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>

小开

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>

小开

@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>

小开

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

小开

For vertical center in Tailwind Grid use class name:

self-center

 <div class="self-center">
小开

You have another choice which is grid and can do

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

小开

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 and center

  <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

For justification between the items

just change the justify-center into justify-between

 <div>
<div class="bg-yellow-400 flex flex-col h-screen justify-between 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>
</div>

enter image description here

Likewise by tweeking the justify property and the items property we can get our desired design

Hope it helps

小开

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.

小开

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>

提交答案