jQuery: centrare verticalmente un form di login sulla pagina

jQuery: centrare verticalmente un form di login sulla pagina

Come possiamo centrare verticalmente un form di login in una pagina? Con l'aiuto di jQuery.

Partiamo da questa marcatura:


<body>
<div id="login-form-wrap">
	<form action="" method="post" id="login-form">
		<!--...-->
	</form>
</div>
</body>

Dobbiamo impostare il padding superiore del contenitore del form in modo che sia uguale alla metà dell'altezza della finestra meno l'altezza calcolata del form:


var $loginForm = $( "#login-form" );
var $loginFormWrap = $loginForm.parent();

$loginFormWrap.css( "padding-top", ( $( window).height() / 2 ) - $loginForm.outerHeight() + "px" );

Torna su