How center an absolute element (img) that's wider than its parent div?

Question

I'm trying to center an absolute positioned img inside a relative positioned div and the image is bigger than its parent(in a 767px window or lower). But the image does have a fixed width of 767px. What makes it hard for me is that parent div does not have a fixed width, it has a 100% width so I'd have to somehow generate the correct amount of pixels for the 'left' attribute on each resize but I don't know how. I tried setting percentages but with no succes when resizing.

I have been able to somewhat do it with javascript but I'd rather have a css solution since the javascript doesn't work consistently for me.

I need to be able to center the img when the parent div gets smaller than 767px and the img always remains 767px within the div and has a height of 257px.

Any help is appreciated!

html code:

<div class="item">
  <img src="...">
</div>

css:

.item{
position:relative;
height:257px;
overflow:hidden;
}

.item img{
min-width:767px;
position:absolute;
}

Shot

Why the min-width on the image – do you want the image to be stretched to fill the whole container width, if the container is wider than 767px? – Bloemfontein

When it's wider than 767px it did needed to fill the whole container. With 'min-width' the image remains 767px like I wanted but with normal 'width' the image will shrink with the window when the windows get smaller than 767px – Shot

Answer 1

By combining relative and absolute units and left and margin-left:

.item img {
    left: 50%;
    margin-left: -383.5px; /* Half of the width */
    min-width: 767px;
    position: absolute;
}

This only because you mentioned in your question that the image’s width was fixed at 767px; if it’s really just a minimum and can grow larger, you’ll need to use a different approach.

Ralf

You can do this without using fixed pixel values as well: left:-500%; right:-500%; margin:auto; – you “drag” the image out of the container to both sides, and the auto margin then centers it within that range again. jsfiddle.net/sru60agp/1 – Bloemfontein

The percentage value just has to be “big enough”, so that even for a really narrow container it still drags the image far enough to both sides, since the percentage is in reference to the container’s width. So for a really small container it won’t work any more after a certain point – if you manually set the container width to around 70px in my fiddle using dev tools, and then further decrease it, you will see the effect. – Bloemfontein

So the usefulness depends on whether your container can ever get that narrow. You can fight it up to a certain point by using a higher percentage – percentage × container width must equal at least half of the image width. But using really extreme percentage (say like 5000%) might start to have a negative effect on rendering performance. – Bloemfontein

@CBroe awesome thank you! Been searching for a while and your comment works for my issue. – Gallard

Answer 2

A way of doing this without having to hard-code half the width.

For instance, maybe your child element has a variable width that you cannot predict

You can do this instead:

left: 50%;
transform: translateX(-50%);

Perlman

I think this is even simpler than the accepted answer. – Equanimity