Question

这段代码来自Mozilla，它将div设在中心，但它只是水平居中

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container

.box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.box div {
  width: 100px;
  height: 100px;
  background-color:red;
}

<div class="box">
  <div></div>
</div>

Answer 1

完美无缺。给容器一些高度以查看效果：

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  height:200px;
}

.box div {
  width: 100px;
  height: 100px;
  background-color:red;
}

<div class="box">
  <div></div>
</div>

Answer 2

您的代码没问题。您必须将height提供给flex-container

＆＃13;

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height:300px;
  background-color:#4a4545;
}

.box div {
  width: 100px;
  height: 100px;
  background-color:#C58B8C;
}

＆＃13;

<div class="box">
  <div></div>
</div>

＆＃13;

Answer 3

这些原因是您没有为<div>内的<div class="box">提供任何属性请检查我提交的代码我完全没有Mozilla网站。

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  /* add the lines below */
  width: 500px;
  height: 300px;
  border: 2px dotted rgb(96, 139, 168)
}

.box div {
  width: 100px;
  height: 100px;
  /* add the lines below */
  border: 2px solid rgb(96, 139, 168);
  border-radius: 5px;
  background-color: rgba(96, 139, 168, .2);
}

<div class="box">
  <div></div>
</div>

Answer 4

您的父级div（.box）的宽度和高度必须为%或像素。首先尝试设置像素。

Answer 5

添加父标记（.box）高度。 100％，例如

来自Mozilla的flex box align-items示例无法正常工作

5 个答案: