Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

The Simplest Way To Horizontally And Vertically Center A DIV Using CSS

DZone's Guide to

The Simplest Way To Horizontally And Vertically Center A DIV Using CSS

·
Free Resource
//to put the 100px * 100px div in the center of the screen, often used for login or thickbox.


.centered_div {
	width: 100px;
	height: 100px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -50px;       /*half of width*/
	margin-top: -50px;        /*half of height*/
	background: red;
}
Topics:

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}