code snippets

Vertically AND Horizontally Centered Using TailwindCSS

...ok, allright, I know - I should just have this one memorized. But why memorize when you can look it up?


1<div className="flex items-center justify-center min-h-screen">
2  <div className="text-center">
3    <h1 className="text-4xl font-bold">Centered Content</h1>
4    <p className="mt-4 text-lg text-gray-600">This content is centered both vertically and horizontally!</p>
5  </div>
6</div>

Summary: TailwindCSS goodness that centers vertically and horizontally via flex and text-center.