How to center div in tailwind?

You can use tailwind CSS class, '.flex', '.h-screen' for main div and '.m-auto' for inner div, as shown below:

<link rel="stylesheet" href='https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css' />

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

<div id="mainContainer" class="flex h-screen">
    <div  class="m-auto">
        <p>Some Text</p>
    </div>
</div>

Here is the working fiddle link https://jsfiddle.net/wq0ap5vr/

'h-screen': Sets the 100vh (screen-height) as the height

'.flex': just adds "display:flex" to outer div

and '.m-auto': gives margin: auto to inner div

Using Flex-center Class

<div class="flex items-center justify-center h-screen">
  Centered div using Tailwind Flex
</div>

Hope this helps.

You can also do it with grid

<link rel="stylesheet" href='https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css' />

<div class="grid justify-items-center items-center h-screen">
  <div>
    <h3>Hello</h3>
    <button>This is just a button</button>
  </div>
</div>

Fiddle: https://jsfiddle.net/5qezpwmj/

Hope it helps.