css Question posted in
Some basic documentation can be found here.

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

Tags:

2

Answers


  1. 0

    You have applied h-full to your <main> tag, but that is only relative to its wrapping <div>, which is not full-height.
    You need to make your document body and Next.js wrapping container full-height too. Add the following to your tailwind.css:

    html, body, #__next {
  height: 100%;
}

    Note: If you want to make it more flexible, use min-h-full instead of h-full on your <main> element. This way, content will be vertically centered when there’s little content but page will still grow normally if needed.

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search