html - 如何使比其父元素更宽的元素居中？

Question

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

谢谢。

score 6 · Accepted Answer

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

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

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

score 3 · Accepted Answer

3

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

于 2012-04-13T16:03:56.840 回答

score 2 · Accepted Answer

另一种方法是使用：

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

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

score 1 · Accepted Answer

1

.container {
    width:900px
}

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

于 2011-04-07T12:22:59.957 回答

score 1 · Accepted Answer

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

5 回答 5