为什么 display:flex margin:auto 不垂直居中我的 div [重复]答案

【问题标题】：Why is display:flex margin:auto not vertically centering my div [duplicate]为什么 display:flex margin:auto 不垂直居中我的 div [重复]
【发布时间】：2021-04-16 07:40:35
【问题描述】：

我几乎查看了此处的所有类似帖子，但无法弄清楚这一点。为什么我的表单只是水平居中而不是垂直居中？

HTML

<body>
    <div class="container">
        <form>
            <div class="profilePic">
                <img src="https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png" alt="Avatar"
                    class="avatar" />
            </div>
            <div class="formFields">
                <input type="text" placeholder="Enter Username" name="uname" required />
                <input type="password" placeholder="Enter Password" name="pass" required />
                <button type="submit">Login</button>
            </div>
            <div class="formFields" style="background-color:#f1f1f1">
                <span class="pass">Forgot <a href="#">Username</a> or </a> <a href="#">Password?</a></span>
            </div>
        </form>
    </div>
</body>

CSS

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #343a40;
}
.container {
  display: flex;
  align-items: center;
  justify-content: center;
}
form {
  border: 3px solid #f1f1f1;
  background-color: rgb(228, 228, 228);
  margin: auto;
  width: 50%;
}

当前

我希望表单水平和垂直居中。

【问题讨论】：

只是搜索 SO.....https://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically

标签： html css flexbox

【解决方案1】：

试试这个

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

【讨论】：

这是我在其他问题上看到的修复之一，但不幸的是，它没有做任何事情。它在浏览器顶部水平居中，但不是垂直居中。
你给.container 的高度值是多少？
你想要达到的结果是什么？
我没有为容器设置高度值。我基本上只是希望根据带有填充的表单高度自动设置高度。我希望我的潜水水平和垂直居中。我已经用当前结果的图片编辑了问题。