tailwind-css - 在全屏 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/

标签： tailwind-css

Answer 1

你也可以做

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