如何将比其父元素宽的元素居中？

Question

我目前有一个固定宽度为 900px 的 div。
我想添加一个固定宽度为 950px 的子 iframe，并且我希望它与中心完美对齐。
那怎么办呢？

谢谢。

Answer 1

您可以将子元素放置在 50% 处，然后使用子元素宽度一半的负边距：

.parent { position: relative; overflow: hidden; }
.child { position: absolute; left: 50%; top: 0; margin-left: -475px; }

这样您只需要知道子元素的大小。

Answer 2

我在这里找到了一种使用动态宽度来做到这一点的方法： http://www.greywyvern.com/?post =323

Answer 3

另一种方法是使用：

   .parent {
     position:relative;
   }
   .child {
     position:absolute;
     left:50%;
     transform:translateX(-50%);
   }

即使您不知道孩子或父母的大小，它也可以工作，
但不适用于较旧的浏览器。

Answer 4

.container {
    width:900px
}

iframe {
    margin-left:-25px;
    width:950px;
}

Answer 5

我假设你的外部容器宽度是 950px，子 iframe 宽度是 900px 那么你可以使用 margin:0px auto;为你的CSS子容器