Center an image in a div too small for it?

One option would be to absolutely position the image with left: 50% and then use a negative margin-left on the image equal to half of the image's width. Of course, this requires the containing div to have its positioning set to relative or absolute in order to provide the proper container type for the image to be absolutely positioned within.

The other option (and probably better) is instead of using an image tag, just set the image as the background for the parent div, and use the background positioning CSS attributes to center it. Not only does this make sure it's centered without forcing absolute positioning, but it also automatically crops overflow, so the overflow attribute isn't necessary.

You can actually do this by setting the margin-left and margin-right on the image to -100%.

Here's a jsFiddle demonstrating this. (use the one below instead, it's better)

It is an even better idea to set the margin-left and margin-right on the image to a much larger negative number, e.g. -9999%, as with the -100% value, the image starts to move off-center as soon as the div's containing element becomes less wide than 3 times the width of the div:

margin-left: -100% + the div's width: 100% + margin-right: -100% = 3x div width

You can check the difference in behaviour between this jsFiddle and the previous one by toggling the overflow to visible and resizing the result window to less than 300% of the width of the div.

Quoting @MaxOriola on the range of supported browsers (from the comments):

I've retested second fiddle ... in Firefox, Chrome, Safari (last versions) and Explorer 8, 9, 10. Works fine in all of them.

Note: Image element has to be displayed inline or inline-block and centered horizontally with text-align: center (on wrapper element).

// ALL of the JS below is for demonstration purposes only

$(document).ready(function() {
  $('a').click(function() {
    $('body > div').toggleClass('overflow');
  });
})

img {
  margin: 0 -9999% 0 -9999%;
}


/* ALL of the CSS below is for demonstration purposes only */

body {
  text-align: center;
  font-family: verdana;
  font-size: 10pt;
  line-height: 20pt;
}

body>div {
  margin: 0px auto;
  width: 40%;
  background-color: lightblue;
  overflow: hidden;
}

img {
  vertical-align: top;
}

.overflow {
  overflow: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>40% wide div [<a href="#">toggle overflow</a>]
  <div>
    <img src="http://via.placeholder.com/400x200" />
  </div>
  400px wide image
</div>