📜 Center Body

Introduction

In this mini essay I will explain how I can easily center the body of my application, instead of having all my components being at the very top of the page.

---

Implementation

By default my elements in the body will be align at the top wich can be annoying.

But this small issue can be fixed very easily. All I need to do is update the root layout.tsx file

src/app/layout.tsx

The trick is to wrap the {children} within the <main> element and give it the right tailwind css classes:

<main className="min-h-screen flex-1 overflow-y-auto overflow-x-hidden py-24 px-8 bg-secondary/10 flex flex-col">
    {children}
</main>

And that’s it, just like that I fixed this annoying layout everywhere in my application.