Search code examples
csstailwind-css

How to center my elements in center (top, bottom, left and right)?

i have a home page having the following :

import { Button } from "@/components/ui/button";
import Link from "next/link";

export default function Home() {
  return (
    <main className="flex flex-col justify-center h-full  text-center  max-w-5xl mx-auto gap-6">
      <h1 className="text-5xl font-bold">Invoicipedia</h1>
      <p>
        <Button asChild>
          <Link href="/dashboard">Login</Link>
        </Button>
      </p>
    </main>
  );
}

when i run it i got my elements in center just between right and left :

enter image description here however i want my elements to be center r

howver i would like my elements to be center (left, right AND top and bottom), how can i do that please ?

P.S: my goal is to be like the following : enter image description here

Solution

  • Try this : By adding the h-screen and items center

    main classname : "flex flex-col justify-center items-center h-screen text-center max-w-5xl mx-auto gap-6"

    Also text-center is always for text, but here we are dealing with the boxes or elements text-center: This class to centers text within its container. If your goal is to center all child elements (like buttons or boxes), using items-center is more appropriate because it centers the flex items along the cross axis.