如何将 iframe 居中并使其响应移动设备？答案

【问题标题】：How can I center iframe and make it responsive for mobile?如何将 iframe 居中并使其响应移动设备？
【发布时间】：2019-12-10 09:18:41
【问题描述】：

我正在尝试制作适用于台式机和移动设备的视频，但无论我做什么，它都不能满足我的需求。我在代码中添加了text-align:center;，但它也不起作用。

我只使用内联 CSS、HTML、div 标签。下面提供的是我用过的代码，可惜还是失败了。

<div style="text-align:center;width:100%;" >
<iframe width="560" height="315" src="https://www.youtube.com/embed/zqU49pgewPg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

发生的情况是它会在我的网站和移动设备上重叠。

我的预期结果是将它放在中心位置。我不知道我该怎么做，因为我也尝试过.videoWrapper，结果它看起来很小并且与左侧对齐。

【问题讨论】：

标签： html css iframe youtube-iframe-api

【解决方案1】：

试试这个：

.wrap {
  display: table;
  margin: auto;
}

.frame {
  width: 600pc;
  height: 560pc;
}

<div class="wrap">
  <iframe class="frane" src="https://vg.no" />
</div>

【讨论】：

【解决方案2】：

试试这个，让我知道你满意吗？ -

<div style="text-align:center;width:100%;" >
    <iframe width="100%" height="315"
        src="https://www.youtube.com/embed/zqU49pgewPg"
        frameborder="0"
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-    picture" allowfullscreen>
    </iframe>
</div>

【讨论】：