我正在为我的网站使用 Phillip Walton 的“solved-by-flexbox”粘性页脚解决方案。
除此之外，我还有一些视频页面，我想在这些页面上将视频嵌入 (video-container) 居中放置在视口(viewport)中(水平和垂直)
下面是所有设置的内容，Here's一个 JSFiddle 只是为了很好的衡量标准。
.Site {
display: flex;
flex-direction: column;
height: 100vh;
/* 1, 3 */
}
.Site-content {
flex: 1 0 auto;
/* 2 */
padding: var(--space) var(--space) 0;
width: 100vw;
}
.Site-header,
.Site-footer {
flex: none;
/* 2 */
}
.Site-header {
position: absolute;
top: 0;
z-index: 600;
flex: none;
}
.video-container {
position: relative;
width: 70vw;
height: calc(70vw * 9 / 16);
margin-left: auto;
margin-right: auto;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}<body class="Site">
<div class="Site-header">This is a header</div>
<div class="Site-content">
<div class="video-container">
<iframe src="https://player.vimeo.com/video/100978843" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
<div class="Site-footer">This is the footer</div>
</body>我见过几个不同的选项，但大多数都依赖于知道要居中的 div 或对象的确切大小。
例如，这个选项:
.video-container
{
width: 70vw;
height: calc(70vw * 9 / 16);
margin:0 auto;
background:#f7f7f7;
position:absolute;
left:50%;
top:50%;
}
不起作用，我的 video-container 元素仍然位于页面顶部。
我看过另一个使用 Flexbox 居中的代码示例:
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
但这对我来说是不行的，因为它不仅会干扰我的粘性页脚设置，还会干扰网站的其余内容(原因很明显)。
还有其他方法吗？
编辑:我不确定为什么我会收到反对票。我已经尝试用我采取的步骤来解释这个场景，现在我已经在 JS Fiddle 和 Stack Snippet 中提供了完整的代码。如果还有其他问题或我的问题不清楚，请务必告诉我，我可以编辑问题。
最佳答案
SO36651747
在粘性页脚布局中将视口(viewport)中的视频居中
更改了除 iframe 之外的所有样式。摆脱了 CSS 变量(它们没有::root，所以它们没用)。使 .Site-content 成为 flex 容器，因为 flex 容器只会影响它们的子容器。您想要居中的元素是 .Site 的孙元素，因此它无法控制视频容器的居中。
更改了视频容器的样式，使其高度和宽度保持 9:16 的纵横比。
请参阅下面的引用资料。
更改标有🖉
红色边框显示页眉/页脚/视频之间的距离。
.Site {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden; 🖉
align-items: center; 🖉
align-content: center; 🖉
}
.Site-content {
flex: 1 0 auto;
width: 100vw;
display: flex; 🖉
flex-flow: column nowrap; 🖉
justify-content: center; 🖉
align-items: center; 🖉
}
.Site-header,
.Site-footer {
flex: none;
position: absolute;
z-index: 600;
height: 10vh; 🖉
width: 100vw; 🖉
}
.Site-header {
top: 0;
border-bottom: 1px solid red; 🖉
}
.Site-footer {
bottom: 0; 🖉
border-top: 1px solid red; 🖉
}
.video-container {
position: relative;
width: 100%; 🖉
height: 0; 🖉
padding-bottom: 56.25%; 🖉
margin-left: auto;
margin-right: auto;
}
引用资料:
关于javascript - 在粘性页脚布局中将视口(viewport)中的视频居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36651747/