在全屏 div 中与 Tailwind CSS 垂直对齐答案

【问题标题】：在全屏 div 中与 Tailwind CSS 垂直对齐
【发布时间】：2019-07-30 02:10:24
【问题描述】：

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

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

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

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

【问题讨论】：

这已经在 TailwindCSS 文档中有很好的记录：tailwindcss.com/docs/flexbox-align-items/#center

标签： tailwind-css

【解决方案1】：

你也可以这样做

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

【讨论】：

【解决方案2】：

部分引用@mythicalcoder 's solution，但仅使用 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>

【讨论】：

【解决方案3】：

对齐中心和项目中心

虽然安德斯的回答解决了这个特殊情况的问题，但我认为重要的是要注意使用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 类将元素置于 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 使元素在主轴和交叉轴上居中，可以互相代替使用。它们是相互对立的，会根据当前主轴是什么产生不同的结果。

【讨论】：

【解决方案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>

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

【讨论】：

您能否更新您的答案，说明代码在容器中的外观如何结束您想要居中的实际元素

【解决方案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

【讨论】：

【解决方案8】：

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

以自我为中心

 <div class="self-center">

【讨论】：