I recently needed to make a landing page using a placeholder image for a site. I wanted their logo image to be vertically and horizontally centered in the browser.
My first thought was to give the image element the class “centered” and then style that class using my CSS stylesheet:
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. I updated my CSS with:
Here is the final product: