Frontendplace Blog

Sharing Frontend developing ideas

Centrate your login form including extra header

Posted by info on June 10th, 2010

login

Sometimes you need to make a login screen and center the login form vertically and horizontally. I made this crossbrowser example to create a
loginscreen screen. Look at the source how it is been done. You need a heightsetter span to center the content vertically.
But of course if you know the height and the width and these don’t change when changing the fontsize you can easily use the absolute positioning method:

#content{
	position:absolute; 
	top:50%;/*Moves object top edge to screen center*/ 
	left:50%;/*Moves object left edge to screen center*/ 
	margin-top:-250px; 
	margin-left:-250px;
	width:500px;
	height:500px;
	background-color:#3FC;
}