css - Center Oversized Image in Div

Question

I have been trying to sort out how to center an oversized image within a div using css only.

We are using a fluid layout, so the width of the image containers varies as the page width does (height of div is fixed). The image sits within a div, withvalue an inset boxshadow so as to appear as if you are looking through the page at the image.

The image itself has been sized to fill the surrounding div at its widest possible value (the design has a max-width value).

It is pretty easy to do if the image is smaller than the surrounding div:

margin-left: auto;
margin-right: auto;
display: block; 

But when the image is larger than the div it simply starts at the left edge and is off center to the right (we are using overflow: hidden).

We could assign a width=100%, but browsers do a lousy job of resizing images and the web design centers around high quality imagery.

Any ideas on centering the image so that overflow:hidden cuts off both edges evenly?

Answer 1

Try something like this. This should center any huge element in the middle vertically and horizontally with respect to its parent no matter both of their sizes.

.parent {
    position: relative;
    overflow: hidden;
    //optionally set height and width, it will depend on the rest of the styling used
}

.child {
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;

}