JSFiddle - React, Tailwind, and code Playground

by danield770

HTML

<div class="box">
  <p>
    When flex-direction is column...
  </p>
  <p>
    "justify-content: center" - vertically aligns 
  </p>
  <p>
    "align-items: center" - horizontally aligns 
  </p>
</div>

CSS

.box {
  height: 400px;
  width: 400px;
  background: #000;
  font-size: 18px;
  font-style: oblique;
  color: #FFF;
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertically aligns items */
  align-items: center; /* horizontally aligns items */
}