试图让视频帧在浏览器中垂直和水平对齐。这是我有...为什么Flexbox不能垂直居中？
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>视频中心水平方向，而不是垂直方向。
元素#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>钉住它。谢谢。我认为这需要身体的高度，但'＃flex'是父母 – user2898276
试试这个：
从.video删除width并添加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>硬编码的宽度和高度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>
您使用的是什么浏览器？ – Roberrrt
我正在使用Safari – user2898276
在您发布flex元素的示例中* *实际上是垂直居中在其父容器中。为了看到垂直居中的东西的效果 - 它的高度必须小于它的容器的高度;） – Danield