我正在做一个产品登陆页面项目，我不知道如何将iframe youtube嵌入式视频居中。 我正在尝试将此添加到我的。css中
我试过使用保证金:自动自动自动自动； 我有点卡住了，谢谢。。。
null
header{
text-align: center;
font-family: serif;
font-size: 50px;
margin-top: 30px;
}
#header-img{
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
}
#header{
}
#video{
margin: auto auto auto auto;
}<body>
<header id="header">SCHIFRIN'S SPROCKETS
<nav id:="nav-bar">
<ul>
<li><a class="nav-link" href="#">LINK 1</a></li>
<li><a class="nav-link" href="#">LINK 2</a></li>
<li><a class="nav-link" href="#">LINK 3</a></li>
</ul>
</nav>
</header>
<img src="./logo.png" alt="" id="header-img">
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/M-MKbRSSHG8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>null
null
#wrapper {
text-align:center;
}
#video{
margin: auto;
}<div id="wrapper">
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/M-MKbRSSHG8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
在div中换行iframe
<div class="frame">
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/M-MKbRSSHG8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
并将css flexbox添加到该div
.frame{
display: flex;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
}
仅限宽度和高度，如果不需要也可以删除它们。 这应该以x和y轴为中心
您可以将iframe包装在一个div中，并使用text-align:center这个div将内容居中。 在youtube iframe中添加居中标题也很好。
如果要在页面上嵌入多个IFRAM，则应使用class属性而不是id属性。
null
.videoWrapper{
text-align: center;
}<div class="videoWrapper">
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/M-MKbRSSHG8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>