html - 尝试使用 margin-left 和 margin-right 将以前绝对定位的元素居中

Question

我有一个 <iframe>最初与 right 绝对定位和 left初始化时设置的属性。在媒体查询中，我希望元素以 margin-left 为中心。和 margin-right通过将这些属性设置为 0。我不明白的是我可以用另一个 div .contact_form 成功地做到这一点在具有相同初始化的同一页面上(设置为 position:absolute 最初设置其 right: 值)但我无法成功地将相同的过程应用于我的 <iframe> .谁能看出这是为什么？

这是 fiddle 。

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

注意如何 contact_form以媒体查询 768px 到 1023 px 为中心，但是 iframe不是。

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;
    }
}