Center Content

Answered

Barbary Lion posted this in #help-forum

Barbary LionOP

2024-04-01T21:22:03.000Z

Jo, I'm making my own not-found page, but somehow it doesn't want to center itself in the middle of the screen... I know it would work if I change my layout.tsx, but I don't want to do that because I'll change the whole page.

# not-found.tsx

function NotFound() {
    return (
        <main className="bg-red-500 container flex justify-center items-center">
            <h1 className="mr-5 pr-6 font-semibold text-xl border-r border-white border-opacity-30 leading-10 align-top inline-block">404</h1>
            <h2 className="text-base font-normal leading-10 m-0 p-0">This page could not be found.</h2>
        </main>
    );
}

export default NotFound;

# layout.tsx

export default async function RootLayout({
    children
}: Readonly<{
    children: React.ReactNode;
}>) {
    return (
        <html lang="en">
            <head>
                <body suppressHydrationWarning={true} className={cn("min-h-screen bg-background font-sans antialiased", fontSans.variable)}>
                    <Provider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
                        <div id="top" className="relative flex min-h-screen flex-col">
                            <HeaderComponent />
                            <div className="flex-1">{children}</div>
                            <FooterComponent />
                        </div>
                        <TailwindIndicator />
                        <ScrollTop />
                    </Provider>
                </body>
            </head>
        </html>
    );
}