Self Centering Login Panel

by Victor

HTML

<div class="loginPanel">
    <form action="">
        <label for="name">Name</label><input type="text"/> <br/>
        <label for="password">Password</label><input type="text"/> <br/>
        <input type="submit"/>
    </form>
</div>

CSS

.loginPanel {
    margin:0 auto;
    padding:10px;
    width:400px;
    text-align: center;
    background: #e3e3e3;
}

JavaScript

var winheight = $(window).height() / 2 ;
    var winwidth = $(window).width() / 2 ;
    var thisheight = $('.loginPanel').height() / 2;
    var thiswidth = $('.loginPanel').width() / 2 ;
	//the left:0 is specific to this scenario
	$('.loginPanel').css('position', "fixed").css('top', (winheight - thisheight - 50)+ "px").css('left', (winwidth - thiswidth - 50) + "px");