Centering elements with Tailwind / Welcome to Signl

Centering elements with Tailwind

Welfordian
Posted 1 week ago
View Profile

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">
<h1 class="text-white">
It's as easy as this!
</h1>
</div>

Man, isn't this beautiful?

Here's a jsFiddle for ya!

https://jsfiddle.net/vogdhovm/


Must be logged in to comment

Discover more