CSS – Distribute the center in the middle using the grid in the tailwind CSS.

I think the grid layout is getting a little difficult to understand. I want to place the contents of the div in the middle of the page vertically using the grid as shown. Center the distribution in the middle of any device.

Based on my knowledge, I created two columns and a row, and for the content div, I added justify-content-center and align-items-center but it doesn’t work. What am I doing wrong here? Can anyone help me?

function Home() {
    return (
        <div class={"grid grid-cols-2 grid-rows-1"}>
            <div class={" justify-content-center align-items-center"}>
                <h2 class={"text-4xl text-white "}>Hi, I'm</h2>
                <h1 class={"text-blue text-5xl font-semibold"}>Mr. XYZ</h1>
            </div>
        </div>
    );
}

Write a Comment

Your email address will not be published. Required fields are marked *