试图将以前绝对定位的元素居中，边距为左边距和边距

Question

我有一个<iframe>，最初定位时初始化时设置了right和left属性。在媒体查询中，我希望通过将这些属性设置为0来使元素以margin-left和margin-right为中心。我不能理解的是，我能够成功地将其与另一个div .contact_form在同一页面上具有相同的初始化（最初设置为position:absolute并设置了right:值）但我不能成功地将相同的过程应用于我的<iframe> 。谁能明白为什么会这样？

这是小提琴。

https://jsfiddle.net/tfgr2oxs/2/

请注意contact_form如何成为媒体查询768px到1023 px的中心，但iframe不是。{1}}。

Answer 1

我认为你只是缺少一些东西......

left: 0;
right: 0;
margin: auto;

这是一个快速而又脏的版本供您查看：

https://jsfiddle.net/3xt0xg5h/

iframe {
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  width: 550px;
  height: 300px;
  background:blue;
  margin: auto;
}

@media (min-width: 768px) and (max-width: 1023px) {

    iframe {
      background: red;
    }
}