Html 将响应youtube iframe嵌入页面中心

下面是我的代码，我试图将iframe居中，但它总是向左！这是小提琴

我的html

     <center> <div class="videowrapper "><iframe src="http://www.youtube.com/embed/VA770wpLX-Q?&rel=0&theme=light&autohide=1&color=white" frameborder="0" allowfullscreen></iframe></a></div></center>

---

要使您的帧居中，您需要给您的

videowrapper

一个特定的

宽度

，并将

边距

设为左和

右

为

自动

.videowrapper { 
        float: none;
        clear: both;
        width: 700px;<-- Added-->
        position: relative;
        padding-bottom: 56.25%;
        padding-top: 25px;
        height: 0;
        margin: 0 auto;<-- Added-->
        max-width: 100%;<-- Added-->
    }

.videowrapper{
浮动：无；
明确：两者皆有；
宽度：700px；
位置：相对位置；
垫底：56.25%；
填充顶部：25px；
身高：0；
保证金：0自动；
最大宽度：100%；
}

尽管您希望使您的帧具有响应性，但请始终使用

最大宽度：100%

到您的

视频包装器

尝试以下方法：

<div align="center">
<div class="videowrapper "><iframe width="560" height="315"         src="http://www.youtube.com/embed/VA770wpLX-Q?&rel=0&theme=light&autohide=1&color=white" frameborder="0"   allowfullscreen></iframe></a></div>
</div> 

没有css解决方案。iframe可以在文本段落中对齐自身，因此将其放在文本对齐：居中的空段落中

<p style="text-align:center;">
<iframe width="420" height="315" align="middle"
src="https://www.youtube.com/embed/YOURVIDEO?controls=0"  allowFullScreen>
</iframe>
</p>



这不会使其响应。请检查标题您将iframe设置为绝对位置，并将其放置在顶部和左侧
0
，因此此标签将粘贴到其相对元素上，确保您的
中心
标记的位置相对，并相应设置样式。这可能会对您有所帮助。：）我只是从那里复制了代码：p但是如果我设置了max width和height，它会变得混乱。当然，在iframe元素上使用width=“560”height=“315”这样的内联样式会覆盖任何css声明。您是在用户css覆盖的情况下测试它的，还是只测试html代码？可能是重复的
<p style="text-align:center;">
<iframe width="420" height="315" align="middle"
src="https://www.youtube.com/embed/YOURVIDEO?controls=0"  allowFullScreen>
</iframe>
</p>