justify-content 和 align-items 在使用 display: flex [重复] 时无法正常工作

Question

我想在页面中心显示我的容器。为此，我在 CSS 中使用了 flex。

我把代码放在下面：

* {
  background-color: #653706;
}

.nav {
  padding: 10px;
}

input {
  background-color: #fff;
}

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

<div class="fex">
  <input type="text" placeholder="enter your name" class="nav" />
</div>

我使用了display: flex; justify-content: center; align-items: center;。但是使用这个之后，现在容器显示在页面顶部和中心

但我希望容器水平和垂直都位于页面的中心。

Answer 1

方法：

• 将高度 100% 分配给 html、body 和容器 div。

html,
body {
  height: 100%;
  margin: 0;
}

* {
  background-color: #653706;
}

.nav {
  padding: 10px;
}

input {
  background-color: #fff;
}

.fex {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}

<div class="fex">
  <input type="text" placeholder="enter your name" class="nav" />
</div>