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

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>