pfeilbr/horizontally & vertically center div in containing div

## horizontally & vertically center div in containing div
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>untitled</title>
	<meta name="generator" content="TextMate http://macromates.com/">
	<meta name="author" content="Brian Pfeil">
	<!-- Date: 2010-05-20 -->
</head>

<style type="text/css" media="screen">
	html, body {
		margin: 0;
		width: 1024px;
		height: 768px;
		background: grey;
		color: white;
		margin-left: auto;
		margin-right: auto;
	}
	#content {
		width: 400px;
		height: 400px;
		color: black;
		border: 5px solid black;
		left: 312px;
		position: absolute;
		background: white;
	}

	/* center div horizontally & vertically in containing div */
	#container {
		border: 5px solid red;
		width: 100px;
		height: 100px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -50px;
		margin-left: -50px;
	}
</style>

<body>

<div id="content">
	<div id="container">
	Lorem ipsum dolor sit amet
	</div>
</div>

</body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">

	<html lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>untitled</title>
	<meta name="generator" content="TextMate http://macromates.com/">
	<meta name="author" content="Brian Pfeil">
	<!-- Date: 2010-05-20 -->
	</head>

	<style type="text/css" media="screen">
	html, body {
	margin: 0;
	width: 1024px;
	height: 768px;
	background: grey;
	color: white;
	margin-left: auto;
	margin-right: auto;
	}
	#content {
	width: 400px;
	height: 400px;
	color: black;
	border: 5px solid black;
	left: 312px;
	position: absolute;
	background: white;
	}

	/* center div horizontally & vertically in containing div */
	#container {
	border: 5px solid red;
	width: 100px;
	height: 100px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -50px;
	margin-left: -50px;
	}
	</style>

	<body>

	<div id="content">
	<div id="container">
	Lorem ipsum dolor sit amet
	</div>
	</div>

	</body>
	</html>