没有位置的居中视频 iframe：绝对答案

【问题标题】：Center video iframe without position: absolute没有位置的居中视频 iframe：绝对
【发布时间】：2019-11-12 05:06:44
【问题描述】：

我正在尝试将视频 iframe 放置在图片库上方的页面中心。我将 iframe 嵌套在包装器中，因此我的 css 进入包装器 div > video div > 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;
      }

【问题讨论】：

标签： html css iframe center absolute

【解决方案1】：

使用 flexbox，flexbox 可以很容易地在其父项上垂直和水平居中，要使项目居中你只需要在 wrapper 元素上添加 flexbox desplay 和 margin: auto 到你想要居中的项目

.video-wrapper {
  width: 60vw;
  display: flex; 
}

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

【讨论】：