Vertical horizontal centralized with TailwindCSS across full screen div

A-1 - Solution: Flexbox

Considering Flexbox and only using the classes provided by TailwindCss without adding a new div element:

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

check the result here: https://play.tailwindcss.com/HZIvf53Rcv

A-2 - Solution: CSSgrid

Besides Flexbox we have another choice that is CSSgrid using the classes provided by TailwindCss:

• grid : To create a grid container. Doc
• h-screen : To size the container-height to the viewport height.
• justify-items-center : is equivalent to justify-items: center; in CSSgrid and it is centering grid items inside their grid track along the horizontal axis. - Doc
• items-center : is equivalent to align-items: center; in CSSgrid and it is aligning the items inside their grid track to center along the vertical axis - Doc

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

check the result here: https://play.tailwindcss.com/UtW8Gmbvsk

B-2 - Shorthand: CSSgrid

There is a shorthand property in CSSgrid when you want to justify and align items with only one property, that is place-items.

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

When both values vertical and horizontal are the same you can provide a single value.

place-items: vertical-horizontal-value;

In TailwindCSS there is a class for this. place-items-center which is equivalent to place-items: center; in CSS.

Hence if you want to use only one class for this aim you should do this:

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

check the result here: https://play.tailwindcss.com/jxIbYWN9Ad