How to center an image using css

I always try to develop my sites to be standards compliant, and this means using css for all formatting and positioning when possible. I keep having to look up how to center an image, so I decided to write a post so I always know where this information is.

To center an image, set the left and right margins to auto. This will make the margins fill the available space. You must also set the display to block so the image is treated as a content block. Here's a full css definition:

img {
display: block;
margin-left: auto;
margin-right: auto;
}