Ich konnte den mx-auto类，但是尽管我的myContainerFixed类成功显示高度固定，但我无法使my-auto-Kurs zum Arbeiten nutzen.

Beispiel-CSS

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.my-auto {
    margin-top: auto;
    margin-bottom: auto;
}

.myContainerFixed {
    height: 90vh;
}
@screen lg {
    .myContainerFixed {
        height: 85vh;
    }
}

.w-max {
    width: max-content;
}

Obwohl dies in diesem Fall sicherlich nicht die beste Option ist, habe ich es auch mit der absoluten Positionierung versucht und das hat auch nicht funktioniert Hier ist ein Beispiel

.absoluteCenter {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%)
}

HTML-Code

        return (
            <div className='bg-yellow-400 myContainerFixed'>
                <form onSubmit={handleSubmit(formFunction)} className=" bg-pink-400 w-max p-2 mx-auto my-auto rounded-sm [&>input]:mb-4  [&>label]:mr-2">
                    <label>Name</label>
                    <input type="text" {...register("name")} />
                    <div className='italic text-myDarkRed'>{errors.name?.message}</div>
                    <label>Email</label>
                    <input type="email" {...register("email")} />
                    <div className='italic text-myDarkRed'>{errors.email?.message}</div>
                    <label>Available Weights</label>
                    <input type="text" {...register("availableWeights", { setValueAs: (v: string | Array<number>) => Array.isArray(v) ? arrayToString(v) : v.split(",").map((weight) => Number(weight)) })} />
                    {/*  */}
                    <div className='italic text-myDarkRed'>{errors.availableWeights?.message}</div>

                    <button type="submit" className="p-2 rounded shadow-sm bg-gradient-to-b from-myRed to-red-400">Submit</button>
                </form>
            </div>
        );