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

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中的子容器