在全屏 div 上与 Tailwind CSS 垂直对齐

Question

如何将 div 与 Tailwind 垂直对齐？我想要什么：

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

我目前拥有的：

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

HTML

<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');
}

我已经成功地以 class items-center 的辅助轴（左右）为中心。阅读文档，我尝试 align-middle 但它不起作用。我已经确认 div 有全高和 my-auto.

我正在使用这个版本的 Tailwind：https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css

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

Answer 1

使用classjustify-center在主轴上对齐。 align-middle 在 交叉轴上运行 。

Answer 2

对齐中心和项目中心

虽然安德斯的回答解决了这个特殊情况的问题，但我认为重要的是要注意使用 justify-center 和 items-center 是偶然的。

让我们看一下 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>

正如我们所见，上面的代码将元素水平居中。这样做的原因是因为 justify-center class 使元素在 flex 容器的主轴上居中 .

这意味着如果我们将主轴更改为 'column' 那么我们将得到不同的结果。

<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和Items-Center将元素居中在主轴和横轴上，两者可以代替使用。它们是彼此相反的，会根据当前的主轴是什么产生不同的结果。

Answer 3

你也可以

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

Answer 4

根据问题，"Items1"、"Items2" 应该水平和垂直对齐。

水平 => text-center/justify-center

垂直 => 项目居中

这里是生成类似于问题中 ASCII 图像的视图的示例代码。

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

Answer 5

部分引用但仅使用 TailwindCss（版本 1.8.+）提供的必要类：

flex : 使用 flex-div 作为容器
h-screen : 将 container-height 调整为视口高度。
justify-center : 对齐中心（水平中心） - 主轴 - Doc
items-center : 将项目对齐到中心（水平中心） - 横轴 - Doc

我将两行文本居中的解决方案：

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

Answer 6

@bastiotutuama 的回答已经很好了，但是如果周围有其他项目，则使用 align self utilities 而不是 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>

Answer 7

我这样做了，效果很好。

<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

Answer 8

用于 Tailwind Grid 中的垂直中心使用 class 名称：

self-center

 <div class="self-center">

Answer 9

你还有一个选择，就是网格，可以做

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

在全屏 div 上与 Tailwind CSS 垂直对齐

Vertical align with Tailwind CSS across full screen div

tailwind-css

对齐中心和项目中心