Warum kann ich trotz der Einstellung der Höhe des übergeordneten Elements immer noch keine vertikale Zentrierung erreichen?

Question

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

Answer 1

它与顶部元素（myContainerFixed）的display: block（默认）有关。

例如，给它display: flex;将修复此问题

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

我建议移除mx-auto和my-auto，并使用flex属性来定位表单

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