Tailwind CSS follows a utility-first approach, which means that instead of writing custom CSS for each component, we can utilize pre-defined classes that apply specific styles directly to HTML elements. We can center an element by using the utility classes of “margin” and “flex”. This article will guide you through the various techniques to center an element using Tailwind CSS.

Horizontally centering an element with Tailwind

Horizontally Centering Element with Flexbox: Tailwind’s flexbox utilities make it simple to center elements horizontally, ensuring that content remains neatly aligned at the center of the page, enhancing readability and visual appeal.

Syntax:

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

Approach

• Apply flex to make the element a flex container.
• Use justify-center to horizontally centre the element.
• Use items-center to vertically centre the element.

Example: Implementation to center an element horizontally.

Output:

Vertically centering an element with Tailwind

Vertically Centering Element with Flexbox: By leveraging Tailwind’s flexbox capabilities, this method focuses on centering elements along the vertical axis, providing a streamlined solution for achieving balanced and aesthetically pleasing designs.

Syntax

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

Approach

• Use h-screen to set the height of the element to the screen size.
• Apply flex to make the element a flex container.
• Use items-center to vertically center the element.

Example: Implementation to center an element vertically.

Output:

Horizontally and Vertically center an element with Tailwind

Horizontally and Vertically Centering Element with Flexbox: This approach utilizes Tailwind’s flexbox utilities to easily center elements both horizontally and vertically on the screen, ensuring a visually appealing layout with minimal effort.

Syntax

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

Approach

• Use h-screen to set the height of the element to the screen size.
• Apply flex to make the element a flex container.
• Use items-center to vertically center the element.
• Use justify-center to horizontally center the element.

Example: Implementation to center an element vertically and horizontally both.

Output: