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/

Answer 1

你也可以做

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

Answer 2

部分引用@mythicalcoder 的解决方案，但仅使用 TailwindCss 提供的必要类（版本 1.8.+）：

• flex: 使用 flex-div 作为容器
• h-screen：将容器高度调整为视口高度。
• 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 3

对齐中心和项目中心

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

让我们看一下tailwind 文档中的一个示例。

<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 类将元素放在 flex 容器的主轴上。

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

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

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

水平=> 文本中心/对齐中心

垂直=> 项目中心

这是一个示例代码，用于生成类似于问题中的 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

@bastiotutuama 的答案已经很好了，但是如果周围有其他项目，则使用 align self 实用程序而不是 items-center。来源

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

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

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>

看图片

Answer 8

对于 Tailwind Grid 中的垂直中心，使用类名：

自我中心

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