Center Image Vertically and Horizontally

Center an image horizontally and vertically in a container.

The image will center horizontally if the style applied to it has text-align:center; and this works in all browsers.
For the vertical centering assign display:table-cell; and vertical-align:middle; to the container.

<style>
.centered {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  width: (set the width);
  height: (set the width);
  background: white;
  border: 1px silver solid;
}
</style>

Example:

CSS - see above.

Produces the result: The div container below is defined like this:
<div class="centered">
    <img src="images/Steve_Lage.jpg" style="width:50%" />
</div>

The image is centered both vertically and horizontally in the div.  It also resizes itself as the div size changes.  Use the grips on the lower right corner to resize the div and see the image resize and continue to center itself vertically and horizontally.