垂直对齐全屏div上的tailwindcss

Question

如何垂直对齐div与顺风？我想要的是：

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

我已经使用类items-center成功地在辅助轴（左右）上居中。阅读文档我尝试了align-middle但它不起作用。我已经确认div有全高和my-auto。

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

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

Answer 1

证明中心和项目中心

虽然安德斯的回答解决了这个特殊情况的问题，但我认为重要的是要注意使用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-grey-lighter">
  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>

正如我们所看到的，上面的代码将元素水平居中。原因是因为justify-center类将元素集中在flex容器的主轴上。

这意味着如果我们要将主轴更改为“列”，那么我们会得到不同的结果。

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

<div class="flex flex-col justify-center bg-grey-lighter">
  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>

Justify-Center和Items-Center将元素集中在主轴和横轴上，它们可以代替彼此。它们是彼此的对立面，并将根据当前主轴的不同产生不同的结果。

Answer 2

你也可以

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

Answer 3

使用类justify-center在主轴上对齐。 align-middle在横轴上运作。