DEV Community

Thomas Step
Thomas Step

Posted on • Originally published at thomasstep.com on

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>

Enter fullscreen mode Exit fullscreen mode

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.

Discussion (3)

Collapse
afif profile image
Temani Afif

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

Collapse
thomasstep profile image
Thomas Step Author

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.

Collapse
afif profile image
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.