html - 为什么 Flexbox 不垂直居中？

Question

尝试让视频帧在浏览器中垂直和水平对齐。这是我所拥有的...

body {
  height:100%;
  width:100%;
}

#frame {
  display: flex;
  align-items: center;
  justify-content: center;
}

.video {
  width: 80%;
}

<div id="frame">
  <div class="video">
    <iframe  width="1200" height="675" src="https://www.youtube.com/embed/dQw4w9WgXcQ?ecver=1" frameborder="0"></iframe>
  </div>
</div>

视频水平居中，但不垂直居中。

Answer 1

元素#frame与内容(.video)具有相同的高度:

body {
  height:100%;
  width:100%;
}
#frame {
  border:1px dotted red;
  display:flex;
  align-items:center;
  justify-content:center;
}
.video {
  border:1px dotted blue;
  line-height:0;
  width:80%;
}

<div id="frame">
  <div class="video">
    <img src="https://placehold.it/100x75"/>
  </div>
</div>

因此 .video 垂直居中，但您看不到它!如果您为 #frame 添加的高度大于内容 (.video)，您可以看到 .video 也垂直居中!请参阅以下示例:

body {
  height:100%;
  width:100%;
}
#frame {
  border:1px dotted red;
  display: flex;
  align-items: center;
  justify-content: center;
  height:200px;
}
.video {
  border:1px dotted blue;
  line-height:0;
  width: 80%;
}

<div id="frame">
  <div class="video">
    <img src="https://placehold.it/100x75"/>
  </div>
</div>