来自 Mozilla 的 flex box align-items 示例不起作用答案

【问题标题】：flex box align-items example from Mozilla not working来自 Mozilla 的 flex box align-items 示例不起作用
【发布时间】：2018-09-02 00:57:10
【问题描述】：

此代码来自 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>

【问题讨论】：

为我工作...
我在几个不同的浏览器中尝试过它对我不起作用
因为文档只显示代码的相关部分......

标签： html css firefox flexbox

【解决方案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>

【讨论】：

我知道当你用像素给出高度时它可以工作，但我想要 100% 或没有高度，就像它在示例中所做的那样不起作用
@Punya 检查元素，你会看到 . Doc没有给出完整的代码，他们给出了相关的代码，他们不会显示他们添加的高度

【解决方案2】：

您的代码没有问题。你必须把height 给flex-container

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

.box div {
  width: 100px;
  height: 100px;
  background-color:#C58B8C;
}

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

您的父级div (.box) 必须具有宽度和高度、% 或像素。先尝试设置像素。

【讨论】：

【解决方案5】：

<div class="box">
</div>
 <style>
body {
  align-items: center;
  display: flex;
  justify-content: center; 
  height:90%;
}
.box {
  width: 100px;
  height: 100px;
  background-color: blueviolet;
  border-radius: 50px;
}
</style>
<!--   
 ______   ______   ______   __       
/_____/\ /_____/\ /_____/\ /__/\     
\::::_\/_\:::_ \ \\:::_ \ \\.:\ \    
 \:\/___/\\:\ \ \ \\:\ \ \ \\::\ \   
  \:::._\/ \:\ \ \ \\:\ \ \ \\__\/_  
   \:\ \    \:\_\ \ \\:\_\ \ \ /__/\ 
    \_\/     \_____\/ \_____\/ \__\/ 
                                 
 all your need infoo!
-->

【讨论】：

您的答案不清楚，可以通过其他支持信息进行改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。您可以在帮助中心找到更多关于how to write good answers 的信息。
正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案6】：

添加父标签 (.box) 高度。 100%，例如

【讨论】：