Css 将溢出元件居中放置在其他元件内

我在div中有一个iframe，如下所示：

<section>
   <div>
      <iframe></iframe>
   </div>
</section>

工作很好，但我想中心的视频以及。对于图像，我将它们添加为背景图像并使用

background-size: cover 

---

把它们放在中间。这很简单，因为它们会自动重新缩放到最大可能的大小。然而，这不适用于视频。如果可能的话，我可以简单地将iframe垂直和水平居中。

包裹iframe并使用

文本对齐：居中以对齐水平中心

div {
text-align: center;
display: block;
}

或

尝试：

将块元素居中的标准方法：

iframe{
显示：块；
左边距：自动；
右边距：自动；
}
是否将此添加到您的css帮助中？如果div大于section，它就可以工作

section div {
    margin-top:-50%;
    margin-left:-50%;
}

如果要将iframe置于section？或DIV内的中心位置，则在实践中会产生相同的效果。由于节和div具有相同的位置。您可以将
iframe
内容设置为您控制的页面，或者内容必须直接来自YouTube？将iframe包装在何处？或者
iframe{margin:0 auto；display:block；}
尝试绝对定位。如果可能，共享链接？您不能在iframe上使用
text align:center
。我试过使用
display:inline
它只是不影响它。@pandavenger我不是为
iframe
指定文本对齐，而是为
div
指定的，它使内容位于它的中心。不，我想它不起作用，因为iframe溢出了，我明白你的意思。你是对的，这不会像现在这样起作用。你能用小提琴再现一下吗？这看起来是个正确的想法，但我不认为
-50%
永远是正确的数量。它引用指定父维度的50%（例如，
width:198px
），因此只有当iframe的内容正好是父维度的两倍（例如396px宽）时，它才会居中放置iframe。@Rory O'Kane不，其想法是div获取其内部内容的宽度/高度。所以50%意味着内容的一半。没有给出精确的尺寸，很难精确地将内容居中。
iframe { 
margin: 0 auto; 
display: block;
}

iframe {
    margin:0 auto;
}

section div {
    margin-top:-50%;
    margin-left:-50%;
}