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

我已经成功地以类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

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

Answer 2

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

正义中心和物品中心

虽然安德斯（Anders）的答案解决了此特定情况下的问题，但我认为必须注意，使用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-grey-lighter">
  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
  <div class="text-grey-darker text-center bg-grey-light 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-grey-lighter">
  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>

Justify-Center和Items-Center将元素在主轴和交叉轴上居中，可以将它们彼此代替使用。它们彼此相反，并且会根据当前主轴的位置产生不同的结果。

Answer 4

您也可以

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

Answer 5

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

Answer 6

我是这样做的，而且效果很好。

<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

Answer 7

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

在全屏div上与tailwindcss垂直对齐

7 个答案:

正义中心和物品中心