Tue, 2003-07-29 08:30
This is one way of vertically centering using DHTML to adjust the margin as the page loads.
function vertcenter(x){
var x=document.getElementById(x);
var h=x.style.height;
var sch=screen.availHeight;
var dt= (sch-h)/4;
x.style.marginTop=dt+"px";
}div#theid{ width:300px; height:300px; margin-top:0; margin-bottom:0;}<body onload="javascript:vertcenter('theid');">
<div id="theid">
</div>You could of course change the value of top instead of margin.
If you know of any simpler ways please post.
Tue, 2003-07-29 16:50
#1
FAQ Vertical Centering
Centering via Auto-width margins
body {
margin:50px 0px; padding:0px;
text-align:center;
}
#Content {
width:500px;
margin:0px auto;
text-align:left;
padding:15px;
border:1px dashed #333;
background-color:#eee;
}
Centering with a Negative Margin
body {margin:0px; padding:0px;}
#Content {
position:absolute;
left:50%;
width:500px;
margin-top:50px;
margin-left:-266px;
padding:15px;
border:1px dashed #333;
background-color:#eee;
}
Both solutions gracefully copied from bluerobot.com. Not sure if these quite match the "vertical centering" mentioned in Tony's post, though.
Tue, 2003-07-29 20:51
#2
FAQ Vertical Centering
Hmm, they more match the 'Horizontal Centering', another post in the FAQ section... 
Wed, 2003-07-30 01:19
#3
FAQ Vertical Centering
Oops... really faq'd that one. Thanks