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-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.