See the Pen Flex center div using Tailwind CSS by Chris Bongers ( CodePen. The final CSS code will look like the following: items-center: This centers the content vertically.justify-center: This centers the div horizontally.flex: Adds the display: flex CSS property.Let's see how that would look like: Centered using Tailwind Flex Īs you can see, the div alignment looks similar to the first example but with an extra variable. The approach is pretty similar, but we have to specify the horizontal and vertical alignment with flexbox. Tailwind center div with flex center Ī second option to center in Tailwind is to use flexbox for the HTML element. Looking for a CSS Grid centered version? 2. See the Pen Grid center content using Tailwind CSS by Chris Bongers ( CodePen. This code will perfectly center the element horizontally and vertically on the page. h-screen: Sets the 100vh (screen-height) as the height.place-items-center: Gives it the center value on the place-items property.grid: Gives the element a display: grid css property.Centered using Tailwind GridĬan you believe this code is all we need? We'll start by using grid center to make a div element horizontally and vertically centered on a page. Generally, css grid should be used for the high-level layout and flexbox CSS for details.įor our demo, we'll use the same CSS structure so you can see the difference in both examples better.

There isn't a clear wrong or right choice between these two methods. We'll be looking at two methods of centering a div with Tailwind. Nowadays, I choose Tailwind CSS as my goto CSS framework.Īnd today, I'll show you how to center elements with Tailwind CSS quickly. Using Tailwind CSS to center a div element vertical & horizontal with flexbox or CSS grid allignment.

Display flex vertical align