Somehow centering a div is a problem that most people face, especially beginners getting started with web development. I have been working with Tailwind CSS and I wanted to quickly show you how to center a div using Tailwind.
Introduction
We will be exploring two methods of centering a div with Tailwind CSS. There is no right and wrong choice, so feel free to use whichever method you feel most comfortable using. Lets dive in!
1. Centering a div using Flex in Tailwind
We will start by using flex to center a div vertically and horizontally on a page. But before that, if you have not integrated Tailwind within your html project, check my previous article for a quick run through on how you can add tailwind to your html project.
<div class="flex justify-center items-center h-screen">
Centered using flex
</div>
Lets break down what we just did:
- Flex: adds the CSS flex property (display:flex).
- justify-center: used to center the div horizontally
- items-center: used to center the content vertically
- h-screen: not necessary but it sets the height of the div to 100vh (height:100vh).
That was easy right ? Lets move on to the second way of centering a div with Tailwind CSS.
2. Centering a div using Grid in Tailwind
A second option of centering an html element is by using Grid. This approach is very similar to flex, but with a few changes.
<div class="grid place-items-center h-screen">
Centered using Grid
</div>
Lets break down what we just did:
- Grid: give the element a CSS grid property (display:grid).
- place-items-center: places grid items on the center of their grid areas learn more
- h-screen: sets the height of the div to 100vh (height:100vh).
Conclusion
I hope you can now center a div using either grid or flex😊. Thank you for reading. If you have any questions, feels free to reach me through twitter @khazifire. And don't forget to follow for more similar content.
Top comments (0)