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 . All we have to do is three things: flexbox use to make the element the height of the screen h-screen use to make the element a flex flexbox use to vertically center it items-center use to center it horizontally justify-center 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: See the Pen by smpnjn ( ) on . Horizontally and vertically centering with Tailwind @smpnjn CodePen Vertically centering an element with Tailwind The easiest way to vertically center something is to do what we did before, and use . This time, though, we'll remove . The item will then be centered only along the vertical axis. flexbox justify-center <div class="h-screen flex items-center">
    Vertically Centered Element
</div> You can see an example of this in the codepen below: See the Pen . here 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 horizontal and vertical centering, just without . Here's the result: h-screen See the Pen here. 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 in general, you can . CSS find my other content here Also published here.

2022 - HackerNoon Contributor of the Year - Coding

2022 - HackerNoon Contributor of the Year - Coding Skills

2022 - HackerNoon Contributor of the Year - Java

2022 - HackerNoon Contributor of the Year - Javascript

2022 - HackerNoon Contributor of the Year - Website Development

2022 - Tip Your Hat Tutorials Best Tutorials

Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Coding

Nominated for 2022 - HackerNoon Contributor of the Year - Coding Skills

Nominated for 2022 - Tip Your Hat Tutorials Best Tutorials

Nominated for 2022 - HackerNoon Contributor of the Year - Java

Nominated for 2022 - HackerNoon Contributor of the Year - Website Development

Nominated for Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Typescript

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

How to Centre an Element in CSS with Tailwind

How to Centre an Element in CSS with Tailwind

Too Long; Didn't Read

People Mentioned

Johnny Simpson

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How to Centre an Element in CSS with Tailwind

Too Long; Didn't Read

People Mentioned

Johnny Simpson

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES