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

Question

I currently have a div with a fixed width of 900px.
I'd like to add a child iframe with a fixed width of 950px, and I'd like it to be perfectly aligned to the center.
How can that be done?

Thanks.

Don't you think something is broken in your question ? Why do you want to have something larger that it's container ? — Clement Herreman, Apr 07 '11 at 12:21
+1 I don't understand why a child element would ever need to appear larger than it's parent. — Bendihossan, Apr 07 '11 at 12:25
There's also a very similar question here: http://stackoverflow.com/questions/5581034/is-there-are-way-to-make-a-child-divs-width-wider-than-the-parent-div-using-css. — Bendihossan, Apr 07 '11 at 12:41

score 6 · Answer 1 · answered Apr 07 '11 at 12:32

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.

score 3 · Answer 2 · answered Apr 13 '12 at 16:03

3

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

answered Apr 13 '12 at 16:03

Gregory Bolkenstijn

10,003
7
36
38

Very awesome technique, but you should definitely put the relevant parts here in the answer in case the remote site ever goes down. Ping me when you do and I'll upvote you. – Mike Jun 28 '16 at 23:37

qbolec · Answer 3 · 2016-07-21T10:05:58.130

2

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.

edited Jul 21 '16 at 10:05

answered Jan 21 '16 at 14:55

qbolec

5,374
2
35
44

1

Shouldn't it be `translateX`? – LarsW Jul 09 '16 at 11:35

score 1 · Accepted Answer · answered Apr 07 '11 at 12:22

1

.container {
    width:900px
}

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

answered Apr 07 '11 at 12:22

Diodeus - James MacFarlane

112,730
33
157
176

score 1 · Answer 5 · answered Apr 07 '11 at 12:23

1

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

answered Apr 07 '11 at 12:23

gourav-Khanna

33
6

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

5 Answers5

Linked