3 replies [Last post]
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 6 hours 23 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5125
Points: 2722

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.

Tags:
KnightWolfJK
KnightWolfJK's picture
Offline
Enthusiast
Washington, DC
Last seen: 7 years 19 weeks ago
Washington, DC
Timezone: GMT-5
Joined: 2003-06-10
Posts: 210
Points: 0

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.

Diplomacy is the art of letting someone have your way

dJomp
dJomp's picture
Offline
Enthusiast
York, England
Last seen: 11 years 32 weeks ago
York, England
Joined: 2003-03-23
Posts: 422
Points: 0

FAQ Vertical Centering

Hmm, they more match the 'Horizontal Centering', another post in the FAQ section... Laughing out loud

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

KnightWolfJK
KnightWolfJK's picture
Offline
Enthusiast
Washington, DC
Last seen: 7 years 19 weeks ago
Washington, DC
Timezone: GMT-5
Joined: 2003-06-10
Posts: 210
Points: 0

FAQ Vertical Centering

Oops... really faq'd that one. Thanks

Diplomacy is the art of letting someone have your way