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:

.centered {
position: absolute;
top: 50%;
left: 50%;
}

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.

Continue reading CSS Trick: How To Center an Object/Image Exactly In The Center of Browser →