Centering a Div With Tailwind CSS

Somehow centering a div still seems to trouble people. I have mostly been working with Tailwind CSS lately and I wanted to quickly share how I center a div with Tailwind. I’ll first show the examples and then describe what is happening.

<div class="flex flex-row min-h-screen justify-center items-center">
  I am centered
</div>

The same classes work with either flex-row or flex-col, which set the flexbox’s main axis either horizontally or vertically, respectively. Setting the height with min-h-screen is just an easy way to take up an entire screen’s view. The final two classes are where I needed to learn a tiny amount of CSS.

I played around with justification and alignment far too long before I finally looked into what they affect. justify-content refers to how the content should be positioned along the main axis, while align-content refers to how the content should be positioned along the cross axis. Justifying content and aligning content with Tailwind are simple one-to-one mappings between their classes and the actual CSS, so once I understood how the CSS worked, I understood how the utility worked.

Comments

[Temani Afif]

please don't make a text container a flexbox container: dev.to/afif/never-make-your-text-c...

[Thomas Step]

Thanks for pointing that out, but that was not the idea or content of this article. Text is easy to see, which is why I used text inside of the div. I did not make any claim about what the content of the div was or should be and I would expect that anyone running into issues with flex content would be looking elsewhere for that information.

[Temani Afif]

Text is easy to see, which is why I used text inside of the div --> this is exactly the issue of almost all the centring articles. They all use text so everyone will consider this as a method to center text inside a div and everyone will run into the issues I described in the linked articles because their text won't be I am centred but more than that.

I would expect that anyone running into issues with flex content would be looking elsewhere for that information --> not really or at least it will be a pain to understand "why a code is working fine on the article and not on my website?". This is a big frustration for a beginner that's why I wanted to highlight that issue in case someone is reading this article.