TailwindCSS 如何设置全屏维度 DIV 垂直对齐？

要使用 TailwindCSS 将 div 在屏幕中垂直居中对齐，我们可以利用 Tailwind 提供的 Flexbox 或者 Grid 布局工具类。下面将分别介绍两种方法实现垂直居中对齐。

使用 Flexbox

1. 首先，我们需要为父容器添加 flex 类来启用 Flexbox 布局。
2. 然后，使用 items-center 类可以使子元素在垂直方向上居中。
3. 使用 justify-center 类可以使子元素在水平方向上居中。
4. 为了使 Flexbox 布局占满整个屏幕的高度，我们需要添加 h-screen 类，这将设置父容器的高度为视口高度。

下面是一个示例代码：

html
<!-- Flexbox 实现居中的父容器 -->
<div class="flex items-center justify-center h-screen">
  <!-- 居中的内容 -->
  <div class="bg-blue-500 text-white p-8">
    居中的内容
  </div>
</div>

使用 Grid

1. 为父容器添加 grid 类启用 Grid 布局。
2. 使用 place-items-center 类可以同时在垂直和水平方向上居中子元素。
3. 同样，使用 h-screen 类设置父容器高度为视口高度。

示例代码如下：

html
<!-- Grid 实现居中的父容器 -->
<div class="grid place-items-center h-screen">
  <!-- 居中的内容 -->
  <div class="bg-red-500 text-white p-8">
    居中的内容
  </div>
</div>

以上两种方法都能够实现在屏幕中垂直和水平居中对齐 div。在选择哪种方法实现时，可以根据你的具体布局需求和对Flexbox或Grid布局的熟悉程度做出决定。

可以这么设置

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

Partly referencing @mythicalcoder 's solution but using only the necessary classes provided by TailwindCss (Version 1.8.+):

• flex : To use a flex-div as container
• h-screen : To size the container-height to the viewport height.
• justify-center : To justify center (horizontal center) - main axis - Doc
• items-center : To align the items to center (horizontal center) - cross axis - Doc

My Solution to center two text lines:

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

Run code snippetHide results

Expand snippet

Justify-Center and Items-Center

While Anders' answer solves the problem for this particular case, I think it's important to note that using justify-center and items-center is circumstantial.

Let's have a look at one of the examples from the tailwind documentation.

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

Run code snippetHide results

Expand snippet

As we can see the above code centers the elements horizontally. The reason for this is because the justify-center class centers the element on the flex container's main axis.

This means that if we were to change the main axis to 'column' then we would get a different result.

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

Run code snippetHide results

Expand snippet

Justify-Center and Items-Center centers the elements on the main axis and the cross axis, and they can be used in place of each other. They are the opposites of each other and will produce different results depending on what the current main axis is.

I have tried to summarize different occurrences of centering the divs

Center divs in Column

For fit width

shell
  <div class="bg-yellow-400 flex flex-col h-screen justify-center items-center">
    <div className="bg-green-500 p-2">item 1</div>
    <div className="bg-pink-500 p-2">item 2</div>
  </div>

For full width

shell
  <div class="bg-yellow-400 flex flex-col h-screen justify-center items-center">
    <div className="bg-green-500 p-2 w-full flex justify-center">
      item 1
    </div>
    <div className="bg-pink-500 p-2 w-full text-center">item 2</div>
  </div>

---

Extra:

Center vertically split divs

shell
<div class="flex h-screen flex-col">
  <div class="flex flex-1 items-center justify-center bg-green-500 p-2 text-4xl">
    <div class="bg-yellow-400 p-6">Item 1</div>
  </div>
  <div class="flex flex-1 items-center justify-center bg-pink-500 p-2 text-4xl"><div class="bg-amber-400 p-6">Item 2</div></div>
</div>

Center horizontally split divs

shell
<div class="flex h-screen">
  <div class="flex flex-1 items-center justify-center bg-green-500 p-2 text-4xl">
    <div class="bg-yellow-400 p-6">Item 1</div>
  </div>
  <div class="flex flex-1 items-center justify-center bg-pink-500 p-2 text-4xl"><div class="bg-amber-400 p-6">Item 2</div></div>
</div>

Center divs in Row

For fit height

shell
<div>
  <div class="flex h-screen items-center justify-center bg-yellow-400">
    <div class="flex justify-center bg-green-500 p-2">item 1</div>
    <div class="bg-pink-500 p-2 text-center">item 2</div>
  </div>
</div>

For full height

shell
<div>
  <div class="flex h-screen items-center justify-center bg-yellow-400">
    <div class="flex h-full items-center bg-green-500 p-2">item 1</div>
    <div class="flex h-full items-center bg-pink-500 p-2">item 2</div>
  </div>
</div>

According to the question, the "Items1", "Items2" should be both horizontally and vertically aligned.

Horizontal => text-center/justify-center

Vertical => items-center

Here is a sample code for producing a view similar to the ASCII image in the question.

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

Run code snippetHide results

Expand snippet