如何居中比它的父元素宽的元素？

Question

我目前有一个固定宽度为900px的div。
我想添加一个固定宽度为950px的儿童iframe，我希望它与中心完美对齐。
如何做到这一点？

谢谢。

Answer 1

.container { 
    width:900px 
} 

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

Answer 2

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

Answer 3

您可以将孩子在50％，然后用阴性切缘是孩子的一半宽度：

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

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

Answer 4

我找到了一种与动力学宽度在这里做到这一点：http://www.greywyvern.com/?post=323

Answer 5

另一种方法是使用：

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

即使你不知道的孩子，也没有父母的尺寸的作品， 但在旧版浏览器中无效。