how to vertically place item center of the screen using tailwind css - next.js

Question

I am making form in next.js and i am unable to place the form vertically in the center of the screen. I am using one way that allows me to center it but it changes my form original size
the code without center of screen
import React from "react";
function SignUp() {
return (
<div className="h-screen bg-gray-50 pt-5 ">
<form className=" grid grid-cols-1 gap-4 p-9 rounded-xl shadow-xl bg-gray-50 max-w-sm mx-auto ">
<h1 className="text-2xl font-bold text-purple-600 ">
SignUp{" "}
<span className="text-sm font-normal text-gray-400">
to Trading Application
</span>
</h1>
<div>
<input className="input" type="text" placeholder="Company Name..." />
</div>
<div>
<input className="input" type="text" placeholder="Username..." />
</div>
<div>
<input className="input" type="text" placeholder="Email..." />
</div>
<div>
<input className="input" type="text" placeholder="Password..." />
</div>
<div>
<input
className="input"
type="text"
placeholder="Confirm Password..."
/>
</div>
<button className="btn btn-purple mt-3 rounded-full">
Create Account
</button>
</form>
</div>
);
}
export default SignUp;
code with center of screen trick but this trick changes the size of my form
<div className="h-screen bg-gray-50 pt-5 grid grid-cols-1">
<form className="place-self-center grid grid-cols-1 gap-4 p-9 rounded-xl shadow-xl bg-gray-50 max-w-sm mx-auto ">
<h1 className="text-2xl font-bold text-purple-600 ">
SignUp{" "}
<span className="text-sm font-normal text-gray-400">
to Trading Application
</span>
</h1>
<div>
<input className="input" type="text" placeholder="Company Name..." />
</div>
<div>
<input className="input" type="text" placeholder="Username..." />
</div>
<div>
<input className="input" type="text" placeholder="Email..." />
</div>
<div>
<input className="input" type="text" placeholder="Password..." />
</div>
<div>
<input
className="input"
type="text"
placeholder="Confirm Password..."
/>
</div>
<button className="btn btn-purple mt-3 rounded-full">
Create Account
</button>
</form>
</div>
tailwind code for btn, btn-purple & input
#layer components {
.input {
#apply border border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent shadow-md rounded-lg px-3 py-2 w-full font-light
transition duration-300;
}
.btn {
#apply rounded-md py-2 px-3 border-transparent focus:outline-none transition duration-500 uppercase font-medium;
}
.btn-purple {
#apply bg-purple-600 text-white hover:bg-purple-700;
}
}
these are the only line of code i used in my project and nothing more.
I want to vertically center the form without effecting any other changes to my form

Answer 1

i have got the solution of the problem
<div className="h-screen bg-gray-100 p-10 grid grid-cols-1 ">
<div className="place-self-center">
<form className=" grid grid-cols-1 gap-4 p-9 rounded-xl shadow-xl bg-gray-50 max-w-sm mx-auto ">
/* ..... some context ....*/
</form>
</div>
</div>
if we wrap our form into two divs and make parent div(div1) a grid and by using place-self-center class on child div(div2) then the size will not be effected and the context will automatically place in the vertical middle of the screen
<div className="h-screen grid grid-cols-1" >
1
<div className="place-self-center" >
2
<form>
context
</form>
</div>
</div>