Pourquoi ne parviens-je toujours pas à réaliser un centrage vertical malgré le réglage de la hauteur de l'élément parent ?

Question

J'ai pu utiliser le cours mx-auto类，但是尽管我的myContainerFixed类成功显示高度固定，但我无法使my-auto pour travailler.

Exemple 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;
}

Bien que ce ne soit certainement pas la meilleure option dans ce cas, j'ai également essayé d'utiliser le positionnement absolu et cela n'a pas fonctionné non plus Voici un exemple

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

Code HTML

        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>
        );

Answer 1

Cela concerne display: block (par défaut) de l'élément supérieur (myContainerFixed).

Par exemple, lui donner display: flex; résoudra ce problème

.myContainerFixed {
    display: flex;
    height: 90vh;
}

Je recommande de supprimer mx-auto et my-auto et d'utiliser l'attribut flex pour positionner le formulaire

.myContainerFixed {
    height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
}