css - 在其他元素内居中溢出元素

Question

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

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

iframe 包含 Flash 中的 youtube 视频，但在这种情况下可能无关紧要。

我正在构建马赛克，因此尝试使用 div 将 iframe 裁剪到合适的大小。

这是由

.section
    {height: 251px;
    width: 198px;
    overflow: hidden}

效果很好，但我也想将视频居中。对于图像，我将它们添加为背景图像并使用

background-size: cover 

让他们居中。这很巧妙，因为它们会自动重新缩放到可能的最大尺寸。但是，这不适用于视频。如果可能的话，我会满足于简单地将 iframe 垂直和水平居中。

Answer 1

将此添加到您的 CSS 有帮助吗？如果 div 大于 section，它会起作用。

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

http://jsfiddle.net/hvCXm/