Centering a modal (Div) in Next.js with tailwindcss - next.js

Question

I'm creating a blog with next.js, the blog uses a modal for updating or adding new blogs and their content. I'm struggling with the tailwindcss. I'm trying to center the modal but it goes off the screen.
Here is my code but it doesn't work.
const styles = {
modal: `flex justify-center place-self-center vertical-align-center`,
wrapper: `h-full grid grid-cols-1 gap-4 rounded-xl bg-gray-50 max-w-sm mx-autoflex flex-col
justify-start items-center gap-[1rem] p-[1rem] m-auto font-mediumSerif overflow-scroll`,
title: `my-[2rem] font-bold text-3xl`,
smallField: `w-full flex justify-between gap-[1rem]`,
fieldTitle: `flex-1 text-end`,
inputContainer: `flex-[5] h-min border-2 border-[#787878]`,
inputField: `w-full border-0 outline-none bg-transparent`
}
const PostModal = () => {
return (
<div className={styles.modal}>
<div className={styles.wrapper}>
<div className={styles.title}>Create a New Post</div>
<div className={styles.smallField}>
<span className={styles.fieldTitle}>Title</span>
<span className={styles.inputContainer}>
<input
className={styles.inputField}
type='text'
/>
</span>
</div>
<div className={styles.smallField}>
<span className={styles.fieldTitle}>Brief</span>
<span className={styles.inputContainer}>
<input
className={styles.inputField}
type='text'
/>
</span>
</div>
<div className={styles.smallField}>
<span className={styles.fieldTitle}>Banner Image Url</span>
<span className={styles.inputContainer}>
<input
className={styles.inputField}
type='text'
/>
</span>
</div>
<div className={styles.smallField}>
<span className={styles.fieldTitle}>Category</span>
<span className={styles.inputContainer}>
<input
className={styles.inputField}
type='text'
/>
</span>
</div> <div className={styles.smallField}>
<span className={styles.fieldTitle}>Estimated Read Length (in minutes)</span>
<span className={styles.inputContainer}>
<input
className={styles.inputField}
type='text'
/>
</span>
</div>
<div className={styles.smallField}>
<span className={styles.fieldTitle}>Article Text</span>
<span className={styles.inputContainer}>
<textarea
className={styles.inputField}
type='text'
rows={12}
/>
</span>
</div>
</div>
</div>
)
}
export default PostModal;
I tried justify-center, tiems-aling, flex, but nothing works, h-screen, adjusting the width and height, but nothing so far.

Answer 1

The simplest way to center something using tailwind CSS is to use the grid system
Pass this to the outer container
<div className="grid h-screen place-items-center">{children}</div>
or using flex
<div className="flex items-center justify-center h-screen">
{children}
</div>