Center elements with Tailwind CSS

Nowadays, I choose Tailwind CSS as my goto CSS toolkit.
And today, I’ll show you how to center elements with Tailwind CSS quickly.

We’ll be looking at two methods of centering with Tailwind.
There isn’t a clear wrong or right between these two methods…


This content originally appeared on DEV Community and was authored by Chris Bongers

Nowadays, I choose Tailwind CSS as my goto CSS toolkit.
And today, I'll show you how to center elements with Tailwind CSS quickly.

We'll be looking at two methods of centering with Tailwind.
There isn't a clear wrong or right between these two methods, but generally, grid should be used for the high-level layout and flex for details.
For our demo, we'll use the same structure so you can see the difference better.

1 Grid center using Tailwind CSS

We'll start by using grid to center an element perfectly within a page.

<div class="grid place-items-center h-screen">
  Centered using Tailwind Grid
</div>

Can you believe this is all we need?
Let's explore what's going on.

  • grid: Gives the element a display: grid property
  • place-items-center: Gives it the center value on the place-items property
  • h-screen: Sets the 100vh (screen-height) as the height

This code will perfectly center the element on the page.

Looking for a CSS Grid centered version?

2 Flex center using Tailwind CSS

A second option is to use flex box to center the element.
The approach is pretty similar, but we have to specify the horizontal and vertical centering with flex box.

Let's see how that would look like:

<div class="flex justify-center items-center h-screen">
  Centered using Tailwind Grid
</div>

As you can see, it looks similar to the grid option but with an extra variable.

  • flex: Adds the display: flex property
  • justify-center: Does the horizontal center
  • items-center: Does the vertical center
  • h-screen: Sets the 100vh (screen-height) as the height

This will result in the following:

Looking for the CSS Flex center article?

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter


This content originally appeared on DEV Community and was authored by Chris Bongers


Print Share Comment Cite Upload Translate Updates
APA

Chris Bongers | Sciencx (2021-06-25T05:30:24+00:00) Center elements with Tailwind CSS. Retrieved from https://www.scien.cx/2021/06/25/center-elements-with-tailwind-css/

MLA
" » Center elements with Tailwind CSS." Chris Bongers | Sciencx - Friday June 25, 2021, https://www.scien.cx/2021/06/25/center-elements-with-tailwind-css/
HARVARD
Chris Bongers | Sciencx Friday June 25, 2021 » Center elements with Tailwind CSS., viewed ,<https://www.scien.cx/2021/06/25/center-elements-with-tailwind-css/>
VANCOUVER
Chris Bongers | Sciencx - » Center elements with Tailwind CSS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/06/25/center-elements-with-tailwind-css/
CHICAGO
" » Center elements with Tailwind CSS." Chris Bongers | Sciencx - Accessed . https://www.scien.cx/2021/06/25/center-elements-with-tailwind-css/
IEEE
" » Center elements with Tailwind CSS." Chris Bongers | Sciencx [Online]. Available: https://www.scien.cx/2021/06/25/center-elements-with-tailwind-css/. [Accessed: ]
rf:citation
» Center elements with Tailwind CSS | Chris Bongers | Sciencx | https://www.scien.cx/2021/06/25/center-elements-with-tailwind-css/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts