将 <iframe> 标签对齐到 HTML 和 CSS 的中心

Question

我正在尝试将动画与中心对齐，我尝试使用 CSS，但似乎没有任何效果，我什至尝试调整填充和边距以查看是否发生任何变化，但它们没有。

https://gyazo.com/b5b6b9f64e01ccfb107a63470ec5a544

在第一个 Gyazo 链接中，它看起来居中，但在我加载网页时的屏幕截图下方，它根本没有居中。

https://gyazo.com/f920e6004c39dc19eaadbe5f73abd7ae

对不起，它在 Gyazo 链接中，我尝试上传 JSFiddle 链接，但我不知道如何上传包含所有 4 个缩进等的代码，所以我希望你有所有需要的信息。

Answer 1

父 div 需要 100% 宽度并且文本居中对齐。孩子只需要考虑高度/宽度。

.parent {
  width: 100%;
  text-align: center;
}

.child {
  width: 300px;
  height: 200px;
}

<div class='parent'>
      <iframe class='child' src="https://www.example.com/" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>