Revision: 17408
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at September 3, 2009 11:50 by visualpropaganda
Initial Code
<body>
<div id="distance"></div>
<div id="content">
<!-- absolutely centered content -->
</div>
</body>
html, body {
height: 100%; /* required */
}
body {
text-align: center; /* horizontal centering hack for IE */
padding: 0; /* required to "hide" distance div */
margin: 0; /* required to "hide" distance div */
}
div#distance {
margin-bottom: -10em; /* half of content height */
background: red; /* temporary - used to see div */
width: 1px; /* required to "hide" distance div */
height: 50%; /* required */
float: left; /* required */
}
div#content {
position: relative; /* positions content on top of distance */
text-align: left; /* horizontal centering hack for IE */
height: 20em; /* required - desired height */
width: 40em; /* required - desired width */
background: blue; /* cosmetic */
margin: 0 auto; /* required */
clear: left; /* required */
}
Initial URL
http://perishablepress.com/press/2007/09/25/absolute-horizontal-and-vertical-centering-via-css/
Initial Description
Initial Title
Absolute Horizontal and Vertical Centering via CSS
Initial Tags
css
Initial Language
CSS