mjj2000/center-div-in-div.html

## center-div-in-div.html
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
#table{
  display:table; /* must be 'table' */
}
#table-cell{
position:relative; /* must be 'relative' */
  width:500px;  /* must be assigned an absolute value */
  height:500px; /* must be assigned an absolute value */
  display:table-cell; /* must be 'table-cell' */
  vertical-align: middle; /* center content div vertically */
  background:blue;
}
#div{
  position:relative; /* must be 'relative' */
  margin:auto auto; /* center div horizontally*/
  width:50%;
  height:50%;
  background:red;
}
</style>
</head>
<body>
<div id="table">
  <div id="table-cell">
    <div id="div"></div>
  </div>
</div>
</body>
</html>
	<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html>
	<head>
	<style>
	#table{
	display:table; /* must be 'table' */
	}
	#table-cell{
	position:relative; /* must be 'relative' */
	width:500px; /* must be assigned an absolute value */
	height:500px; /* must be assigned an absolute value */
	display:table-cell; /* must be 'table-cell' */
	vertical-align: middle; /* center content div vertically */
	background:blue;
	}
	#div{
	position:relative; /* must be 'relative' */
	margin:auto auto; /* center div horizontally*/
	width:50%;
	height:50%;
	background:red;
	}
	</style>
	</head>
	<body>
	<div id="table">
	<div id="table-cell">
	<div id="div"></div>
	</div>
	</div>
	</body>
	</html>