How to center an element that is wider than its parent element?

I currently have a div with a fixed width of 900px.

I'd like to add a child ifr开发者_开发百科ame with a fixed width of 950px, and I'd like it to be perfectly aligned to the center.

How can that be done?

Thanks.

You can place the child at 50%, then use a negative margin that is half the width of the child:

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

This way you only need to know the size of the child element.

I found a way to do it with dynamical widths here: http://www.greywyvern.com/?post=323

Another way would be to use:

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

which works even if you do not know the size of child nor parent, but will not work in older browsers.

.container {
    width:900px
}

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

I assume your outer container width is 950px and child iframe width is 900px then you can use margin:0px auto; for your child container in css