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

Questions

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

November 26, 2021

I’m using tailwind css to arrange two <div> within a parent <div>.

What I want is to make the parent at the center of the screen, that’s why I use "flex justify-center". I also want the two child <div> are ordered row by row, so I use "block". However, they’re still shown in the same row.

Here is how it looks like:

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

What change should I make to make the two child DIV take up the whole width/row ?

>Solution :

You mean like that?

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