How do I center a div both vertically and horizontally with TailwindCSS?

Home

Community

Collections

Find Jobs

How do I center a div both vertically and horizontally with TailwindCSS?

asked 404 days ago

I want a <div> to sit exactly in the center of the page, regardless of screen size. How can I achieve this using TailwindCSS utility classes?

css

tailwindcss

web devlopment

1 Answer

Dev

• answered 403 days ago

Wrap it in a container that’s h-screen and use flexbox centering:

1htmlCopyEdit<div class="h-screen flex items-center justify-center">
2  <div class="bg-gray-100 p-6 rounded shadow">
3    <!-- Your content -->
4  </div>
5</div>
6

1htmlCopyEdit<div class="h-screen flex items-center justify-center">
2  <div class="bg-gray-100 p-6 rounded shadow">
3    <!-- Your content -->
4  </div>
5</div>
6

h-screen makes the outer div full viewport height.
flex items-center justify-center centers children vertically & horizontally.

Write your answer here

Top Questions

How do I implement basic pagination on a MySQL table from a Next.js API route?

What’s the best way to keep my database credentials secret in a Next.js + Express project?

How can I create a simple Next.js API route that fetches data from my MongoDB collection?

How do I debounce a function in JavaScript?

How do you design a multi-language, SEO-friendly blog using Next.js that supports real-time content updates?

Popular Tags