SO36651747

Question

我正在为我的网站使用Phillip Walton的'flex-by-flexbox'粘性页脚解决方案。除此之外，我还有一些视频页面，我想将视频嵌入（video-container）置于视口中（水平和垂直）

下面是设置的所有内容，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中提供了完整和完整的代码。如果还有其他问题或者我的问题不明确那么请通过各种方式告诉我，我可以编辑问题。

Answer 1

SO36651747

在粘性页脚布局中的视口中居中视频

更改了iframe以外的所有样式。摆脱了CSS变量（他们没有:: root所以他们没用）。使.Site-content成为灵活容器，因为弹性容器只会影响他们的孩子。您想要居中的元素是.Site的子孙，因此它无法控制视频容器的居中。

更改了视频容器的样式，使其高度和宽度保持9:16的宽高比。

请参阅以下参考资料。
更改标有
红色边框用于显示页眉/页脚/视频之间的距离。

PLUNKER

README.md

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

参考文献：

在视口中将视频居中在粘性页脚布局中

1 个答案:

SO36651747

在粘性页脚布局中的视口中居中视频