How to center an element using Tailwind CSS?

question front-end tailwindcss
Ram Patra Published on February 17, 2024

In Tailwind CSS, you can center an element using flexbox utilities directly in your HTML markup. Here’s how you can center an element horizontally and vertically:

  1. Centering Horizontally:
<div class="flex justify-center">
  <!-- Your content here -->
</div>

In this example, the justify-center class is used to horizontally center the content within its parent container.

  1. Centering Vertically:
<div class="flex items-center">
  <!-- Your content here -->
</div>

Here, the items-center class is used to vertically center the content within its parent container.

  1. Centering both Horizontally and Vertically:
<div class="flex justify-center items-center">
  <!-- Your content here -->
</div>

By combining justify-center and items-center, you can center the content both horizontally and vertically within its parent container.

Tailwind CSS provides a wide range of utility classes to manipulate flexbox properties directly in your HTML markup, making it easy to create responsive layouts without writing custom CSS. Adjust these classes according to your specific layout needs and hierarchy.

Ram Patra Published on February 17, 2024
Image placeholder

Keep reading

If this article was helpful, others might be too

View all
question nextjs react February 9, 2024 Main advantages of using the Link component in Next.js over Anchors and Buttons

The main advantage of using the Link component in Next.js for client-side navigation is its optimized prefetching behavior, which enhances the performance and user experience of your web application. Here’s a breakdown of the key advantages:

Author Avatar Ram Patra
question nextjs react February 9, 2024 How to make an HTML button element behave like a Link component in Next.js?

In Next.js, you can use the Link component from next/link to create client-side navigation. However, if you want to use an HTML button element (<button>) to behave like a link, you can wrap it with the Link component. Here’s how you can do it:

Author Avatar Ram Patra
question react front-end February 1, 2024 What's the use of key prop in Suspense component in React?

In React, the key prop is used to uniquely identify and track a set of elements during their life cycle. When used with the Suspense component, the key prop helps React keep track of suspended components and their associated data dependencies.

Author Avatar Ram Patra