» Programming » css » centered_div.htm

<html>
<head>
<style type="text/css">

#centered_div
{
	border: 1px dotted grey;
	padding: 4px;
	
	/* These must always be declared. */
	width: 200px;
	height: 150px;
	
	position: absolute;
	top: 50%;
	left: 50%;
	
	margin-left: -100px; /* Half of the width */
	margin-top: -75px; /* Half of the height */
}

</style>
</head>
<body>
	<div id="centered_div">
	This div will appear in the very center of the page.<br />
	Remember, this div must have a static height and width in order for this to work.
	</div>
</body>
</html>
Creative Commons License
All works on this site are licensed under a Creative Commons Attribution-Share Alike 2.5 License.