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）的高度相同：

＆＃13;

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

＆＃13;

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

＆＃13;

因此.video垂直居中，但您无法看到它！如果您向#frame大于内容（.video）添加高度，则可以看到.video也是垂直居中的！请参阅以下示例：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

试试这个：

从width移除.video并添加flex:0 auto和align-self:center

body {
  height:100%;
  width:100%;
}

#frame {
  display: flex;
  align-items: center;
  justify-content: center;
}

.video {
  flex:0 auto;
  /* width: 100%; */
  align-self:center;
}

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

Answer 3

添加以下代码

 padding-top:50%; in css

https://jsfiddle.net/anandnaha/km83v9rv/

Answer 4

iframe中的硬编码宽度和高度不是一个好习惯。

我希望这适合你。

body {
  height: 100vh;
  width: 100vw;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video {
  width: 80%;
}

iframe {
  height: 100vh;
  width: 100vw;
}

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

为什么Flexbox不垂直居中？

4 个答案: