Center an Element Horizontally and Vertically

admin — Sat, 27 Aug 2011 04:49:27 +0000

This one is an oldie but a goody. Using basic HTML/CSS we can position an element directly in the center of the page. Here are the steps to perfectly centering an element:

Absolutely position the element
Position the element 50% from the top, 50% from the left
Define the width/height of the element you wish to center
Compensate for the image’s width and height by applying two negative margins: A negative left margin set to half of the image’s width, and a negative top margin set to half of the image’s height.

#center-me {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 600px;
	height: 260px;
	margin-left: -300px;
	margin-top: -130px;
	background: url('../images/holy-crap-centered.gif') no-repeat;
}

Eric Ditmer » HTML

Center an Element Horizontally and Vertically