文章/答案/技术大牛

发布

社区首页 >问答首页 >为什么display:flex display:auto不能垂直居中

问为什么display:flex display:auto不能垂直居中
EN

Stack Overflow用户

提问于 2021-04-15 21:22:19

回答 1查看 29关注 0票数 0

我几乎看过这里的每一篇类似的帖子，但都搞不清楚。为什么我的窗体只是水平居中，而不是垂直居中？

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

当前

我希望窗体水平居中和垂直居中。

html

css

flexbox

回答 1

Stack Overflow用户

发布于 2021-04-15 21:26:53

尝尝这个

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67109305

复制

相似问题

问为什么display:flex display:auto不能垂直居中
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么display:flex display:auto不能垂直居中EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么display:flex display:auto不能垂直居中
EN