中心视频iframe无位置:绝对

Question

我正试图将视频iframe定位在图像库上方的页面中心。我把iframe嵌套在一个包装器中，所以我的css变成了包装器div>videodiv>iframe。问题是，我需要保持视频本身的响应，同时保持16:9的纵横比。

我能够使用position:absolute来居中视频，但我想避免这种情况，这样我就可以保持一切干净和响应，并将图像定位在它下面

这是我当前的代码：

.video-wrapper {
width: 60vw;
}
.video {
position: relative;
padding-bottom: 56.25%; /* 16:9 -> 9/16x100 */
overflow: hidden;
display: block;
}
.video iframe {
display: flex;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}

视频下方的图像库具有以下属性：

.grid-container {
margin:  auto 20vw;
padding: 0 1vw 0 1vw;
display: grid;
flex-flow: row wrap;
grid-template-columns: repeat(14, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: .5vw;
position: relative;
margin-bottom: 5vh;
}

Answer 1

使用flexbox，flexbox可以轻松地将项目垂直和水平居中在其父项上，要将项目居中，只需在包装元素和边距上添加flexbox展开：自动到要居中的项目

.video-wrapper {
width: 60vw;
display: flex; 
}
.video {
margin: auto;
position: relative;
padding-bottom: 56.25%; /* 16:9 -> 9/16x100 */
overflow: hidden;
display: block;
}