已定义父元素高度，为何无法实现垂直居中？

我可以使用mx-auto类实现表单的水平居中，但尽管myContainerFixed类已成功为容器设置固定高度，my-auto类却无法实现表单的垂直居中。我还尝试了绝对定位方案（尽管该方案在此场景下并非最优选择），但同样未能成功。

示例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;
}

尝试过的绝对定位CSS代码 #

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

HTML（React）代码 #

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

内容的提问来源于stack exchange，提问作者Wayne