居中 iframe div答案

【问题标题】：Centering iframe div居中 iframe div
【发布时间】：2017-04-20 17:35:05
【问题描述】：

在编写 iframe 以随屏幕调整大小时，我无法将其居中。我尝试了来自THIS 问题的所有回复，但没有运气。我错过了一些明显的东西还是没有办法做到这一点？

HTML

<div class="videoWrap">
    <iframe src="http://www.youtube.com/embed/playlist?list=PLn0iVeY0xhgZvWDQ1K_6EChZe_4TL5zDZ"></iframe>
</div>

CSS

.videoWrap {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 80%;
    height: 100%;
}

【问题讨论】：

您是否要将iframe 置于div 的中心？还是屏幕上的div？
如果您觉得其中一种解决方案有帮助，请不要忘记标记答案。如果人们看到您接受了答案，他们将来更有可能帮助您。
@blackandorangecat 我在 div 中将 iframe 居中

标签： html css video iframe center

【解决方案1】：

使用您链接的问题...

.videoWrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.videoWrap iframe {
  width: 300px;
  height: 300px;
}

div, body, html {
  height: 100%;
  width: 100%;
}

<div class="videoWrap">
  <iframe src="http://www.youtube.com/embed/playlist?list=PLn0iVeY0xhgZvWDQ1K_6EChZe_4TL5zDZ"></iframe>
</div>

【讨论】：

这确实使用了flex，这在IE的早期版本中不受支持
将其添加到具有多个 div 的网站时不起作用。
编辑：这行得通！但是 'div,body,html {...}' 不是必需的，尤其是在具有多个 div 的网站中
@alohomoira 我认为你是正确的 - 但是jsfiddle 是必需的。您的网站必须在其他地方设置高度/宽度。无论如何，很高兴它有帮助！

【解决方案2】：

您可以尝试应用边距：自动； css 属性添加到您的 div。 https://www.w3schools.com/css/css_align.asp

【讨论】：

在询问之前尝试了多次。谢谢！

【解决方案3】：

在我的示例中，我使用通常的设置将包装器元素水平和垂直居中（位置：absolute` 在此处应用），并在此处定义宽度和高度。视频本身只是填充居中的包装。

html, body {
  height: 100%;
  margin: 0;
}

.videoWrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 16:9 */
  width: 80vw;
  height: 45vw;
}

.videoWrap iframe {
  width: 100%;
  height: 100%;
}

<div class="videoWrap">
  <iframe src="http://www.youtube.com/embed/playlist?list=PLn0iVeY0xhgZvWDQ1K_6EChZe_4TL5zDZ"></iframe>
</div>

【讨论】：

【解决方案4】：

使用left: 50% 和transform: translateX(-50%)：

.videoWrap {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrap iframe {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 100%;
}

【讨论】：

使用 'transform:' 调整了视频窗口的大小