A Truly Centered Stylesheet?
The code:
<html>
<head>
<title>Vertically and Horizontally Centered CSS Page</title>
<style type="text/css">
/* test styling */
div#content {border: 1px solid black;} /* just borders to see it */
#body { background:#333; }
#outer { background:#666; }
#middle { background:#999; }
#inner { background:#ccc; }
/* css vertical centering:
source: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html */
body, html {height: 100%; margin:0; padding:0;}
#outer {height: 400px; overflow: hidden; position: relative;}
#outer {height: 100%; width:100%; overflow: visible;} /* or without overflow */
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%} /* for explorer only */
/* optional: #inner[id] {position: static;} */
#content {
margin-left: auto; margin-right: auto;
background:ivory;
width:750px;
}
</style>
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner">
<div id="content">
References:<br />
<a href="http://www.jakpsatweb.cz/css/css-vertical-center-solution.html">
Yuhu's Definitive Solution with Unknown Height
</a><br />
<a href="http://www.w3.org/Style/Examples/007/center.html">
W3C Centering Things
</a><br />
</div>
</div>
</div>
</div>
</body>
</html>
Sources:
Yuhu's Definitive Solution with Unknown Height
W3C Centering Things