Center A Div: Grid v/s Flex
Let’s learn it once and for all
If you are one of the developers/software engineers who are not able to center a div — don’t you worry, even Dan Abramov takes time to do that, and that is something when you are a software engineer at Meta and a coauthor of the Create React App and Redux!
Dan went through a mock interview with Ben Awad sometime back. Its fun to watch. The top rated comment was this:
Anyways, its pretty straightforward to center a div using tailwindcss.
Using Flex
<main class="flex flex-row justify-center items-center min-h-screen">
<section class="bg-black w-[50%]">
<h2>content</h2>
</section>
</main>Brief: The result would have been same with flex-col as well. We are using min-h-screen for the parent to take 100% of the available height. Apart from that, justify-center is centering the child along horizontal axis while items-center is centering the child along vertical axis.
Using Grid
<main class="grid min-h-screen justify-items-center items-center">
<section class="bg-black w-[50%]">
<h2>content</h2>
</section>
</main>Brief: Here, grid is used to create the layout. min-h-screen gives the main a minimum height of 100vh applying min-height: 100vh; Unlike flex, to center to align grid items along thier inline-axis, we use justify-items-center and items-center
Results for both:
