I recently needed to make a placeholder page for a site. I wanted the logo image to be centered exactly in the middle of the screen, that is, both vertically and horizontally centered. Quickly, I thought I'd just give the image element a class of "centered" and then style that class:
But as I'm sure you are thinking, this doesn't quite work. What that accomplishes is putting the upper left corner of image exactly in the center of the page, not the center of the image in the center of the page.
In order to get the image exactly centered, it's a simple matter of applying a negative top margin of half the images height, and a negative left margin of half the images width. For this example, like so: