Centering Elements in CSS with Tailwind

Tailwind is an increasingly popular and widely used framework, which makes it easier in some cases to build and ship features and products. In this guide, we’ll be covering how you can vertically and horizontally center an element or text with tailwind…


This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Johnny Simpson

Tailwind is an increasingly popular and widely used framework, which makes it easier in some cases to build and ship features and products. In this guide, we'll be covering how you can vertically and horizontally center an element or text with tailwind.

In another article, I've already covered how to center an HTML element both horizontally and vertically using CSS. If you want to learn about that, click here.

Horizontally and Vertically center an element with Tailwind

Horizontally and vertically centering something with Tailwind is easy with flexbox. All we have to do is three things:

  • use h-screen to make the element the height of the screen
  • use flex to make the element a flexbox
  • use items-center to vertically center it
  • use justify-center to center it horizontally

Our code then looks like this:

<div class="h-screen flex items-center justify-center">
    Horizontally and Vertically Centered Element
</div>

Which produces a result like this:

Vertically centering an element with Tailwind

The easiest way to vertically center something is to do what we did before, and use flexbox. This time, though, we'll remove justify-center. The item will then be centered only along the vertical axis.

<div class="h-screen flex items-center">
    Vertically Centered Element
</div>

You can see an example of this in the codepen below:

Horizontally centering an element with Tailwind

In the same way that we vertically centered the div above, we can also horizontally center using our previous approach. The code for that looks like this:

<div class="flex justify-center items-center">
    Horizontally Centered Element
</div>

This is the same code we used for horizontally and vertically centering, just without h-screen. Here's the result:

Conclusion

Centering elements with flexbox is easy in Tailwind. In this guide, we've learned how to vertically and horizontally center elements including HTML elements and text - which is infinitely useful in web development.

To learn more about CSS in general, you can find my other content here.


This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Johnny Simpson


Print Share Comment Cite Upload Translate Updates
APA

Johnny Simpson | Sciencx (2023-02-04T22:45:51+00:00) Centering Elements in CSS with Tailwind. Retrieved from https://www.scien.cx/2023/02/04/centering-elements-in-css-with-tailwind/

MLA
" » Centering Elements in CSS with Tailwind." Johnny Simpson | Sciencx - Saturday February 4, 2023, https://www.scien.cx/2023/02/04/centering-elements-in-css-with-tailwind/
HARVARD
Johnny Simpson | Sciencx Saturday February 4, 2023 » Centering Elements in CSS with Tailwind., viewed ,<https://www.scien.cx/2023/02/04/centering-elements-in-css-with-tailwind/>
VANCOUVER
Johnny Simpson | Sciencx - » Centering Elements in CSS with Tailwind. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/02/04/centering-elements-in-css-with-tailwind/
CHICAGO
" » Centering Elements in CSS with Tailwind." Johnny Simpson | Sciencx - Accessed . https://www.scien.cx/2023/02/04/centering-elements-in-css-with-tailwind/
IEEE
" » Centering Elements in CSS with Tailwind." Johnny Simpson | Sciencx [Online]. Available: https://www.scien.cx/2023/02/04/centering-elements-in-css-with-tailwind/. [Accessed: ]
rf:citation
» Centering Elements in CSS with Tailwind | Johnny Simpson | Sciencx | https://www.scien.cx/2023/02/04/centering-elements-in-css-with-tailwind/ |

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