Tailwind CSS and perfectly centering content.

• Add flex to the element in question.
• Use items-center for vertical centering.
• Use justify-center for horizontal centering.

The ability to center an content has become extremely easy since the appearance of Tailwind CSS. Since November 1st, 2017, Tailwind CSS appeared on the scene as the new kid and quickly has become a power house. It's ability to easily make class based styling has enabled very quick prototyping a breeze. Out of the box, this library allows for anyone who is not a CSS wiz to quickly learn and adapt this style. I will delve into one of the most beginer unfriendly tasks in styling, and make it quiet simple thanks to Tailwind CSS and the use of flexbox.

<div class="flex items-center">
  I am now vertically centered
</div>

Your item in question is now centering vertically, as stated in the snippet.

<div class="flex items-center justify-center">
  I am now centered both, horizonatally and vertically.
</div>

Your item in question should now be dead center. The best thing to visualize is like a crosshair or a dart board. You've now homed the center.

###Thoughts### You've very easily just managed to get the centering you wanted without the back and forth one might experience with doing this through pure css. This quick little class based styling will save you tons of time over the life cycle of a project. I am very happy to have you around, Tailwind CSS.