如何使比其父元素更宽的元素居中？答案

【问题标题】：How to center an element that is wider than its parent element?如何使比其父元素更宽的元素居中？
【发布时间】：2011-07-31 15:44:09
【问题描述】：

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

谢谢。

【问题讨论】：

【解决方案1】：

另一种方法是使用：

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

即使您不知道孩子或父母的大小，它也有效，但不适用于旧版浏览器。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

.container {
    width:900px
}

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

【讨论】：