The old way of centering with CSS is horrible... absolute and relative positions (not to mention the usage of translate) eurgh!
The new way is Flex!
For this tutorial, we're just going to make a straight up box and center the items horizontally & verticall.
Check this out, it's super super simple... though I don't recommend the usage of inline styles like we have here.
<div class="flex items-center justify-center h-screen w-full bg-red">
It's as easy as this!
Man, isn't this beautiful?
Here's a jsFiddle for ya!