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

我已经成功地将class定位在辅助轴（左右）上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

你也可以这样做

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

Answer 2

我试图总结不同的居中事件divs

列中的中心 div

适用宽度

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

对于全宽

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

额外的：

垂直居中分割的 div

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

水平居中分割的 div

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

行中的中心 div

适合身高

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

对于全高

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

Answer 3

部分引用@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 4

对齐中心和项目中心

虽然安德斯的回答解决了这个特殊情况的问题，但我认为重要的是要注意使用justify-center和items-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 5

根据问题，“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 6

A-1 - 解决方案：Flexbox

考虑Flexbox并仅使用TailwindCss提供的类，而不添加新的 div 元素：

<div class="flex flex-col items-center justify-center h-screen">
  <h3>title</h3>
  <button>button</button>
</div>

在这里检查结果： https://play.tai​​lwindcss.com/HZIvf53Rcv

A-2 - 解决方案：CSSgrid

除了Flexbox之外，我们还有另一个选择，那就是CSSgrid使用TailwindCss提供的类：

• grid：创建网格容器。医生
• h-screen：将容器高度调整为视口高度。
• justify-items-center: 相当于justify-items: center;CSSgrid 中的内容，它使网格项沿水平轴在网格轨道内居中。-医生
• items-center: 相当于align-items: center;CSSgrid 中的内容，它将网格轨道内的项目对齐到沿垂直轴居中 - Doc

<div class="flex flex-col items-center justify-center h-screen">
  <h3>title</h3>
  <button>button</button>
</div>

在这里检查结果： https://play.tai​​lwindcss.com/UtW8Gmbvsk

B-2 - 速记：CSSgrid

当您想要仅使用一个属性（即 ）来对齐和对齐项目时，CSSgrid中有一个简写属性place-items。

place-items: vertical-value(align) horizontal-value(justify);

当垂直值和水平值相同时，您可以提供单个值。

place-items: vertical-horizontal-value;

在TailwindCSS中有一个专门用于此目的的类。place-items-center这相当于place-items: center;CSS 中的。

因此，如果您只想使用一个类来实现此目的，您应该这样做：

<div class="grid h-screen place-items-center">
  <div>
    <h3>title</h3>
    <button>button</button>
  </div>
</div>

在这里检查结果： https://play.tai​​lwindcss.com/jxIbYWN9Ad

Answer 7

@bastiotutuama 的答案已经很好，但是如果周围有其他项目，则使用对齐自我实用程序而不是项目中心。来源

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

使用 React 进行导航

<nav className="flex gap-8 items-center justify-center">
  <Link className=''>SHOP</Link>
  <Link className=''>BACKPACK</Link>
</nav>