TailwindCSS：如何排列两个 <div> 使它们位于屏幕中央

Question

我正在使用 tailwind css 在 parent <div>.

中安排两个 <div>

我想要的是让parent在屏幕中央，这就是为什么我使用“flex justify-center”。我还希望两个 child <div> 逐行排序，所以我使用“块”。但是，它们仍然显示在同一行中。

这是它的样子：

<div className="flex justify-center">
  <div className="block"> <!-- DIV 001 -- >
  </div>
  <div className="block"> <!-- DIV 002 -- >
  </div>
</div>

要让两个childDIV占满整个width/row应该怎么改？

Answer 1

你是那个意思？

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
<div class="flex h-screen">
  <div class="m-auto">
    <div class="block"> <!-- DIV 001 -->
     DIV 1
    </div>
    <div class="block"> <!-- DIV 002 -->
    DIV 2
    </div
  </div>
</div>

Answer 2

尝试这样的事情：

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />


<div class="flex justify-center w-full items-center min-h-screen">
  <div>
    <div>
      div 1
    </div>
    <div>
      div 2
    </div>
  </div>
</div>

TailwindCSS：如何排列两个 <div> 使它们位于屏幕中央

TailwindCSS : How to arrange two <div> so that they are in the center of the screen

tailwind-css