Centering a form jQuery mobile

by Varun Nath

HTML

<div data-role="page" id="homepage">


       

              <div data-role="content">

                    <form action="#nearby"  data-transition="none" data-dom-cache="false">
                                 <label for="email" class="ui-hidden-accessible" >Email :</label>
                                 <input type="text" name="email" placeholder="Email" data-clear-btn="true"><br>
                                 <label for="password" class="ui-hidden-accessible" >Password</label>

                                 <input type="password" name="password" placeholder="Password" data-clear-btn="true">
                                 <br>
                                 <input type="submit" name="submit" id="submit" value="Login" >
                                <a href="#signUp" data-role="button" data-theme="b" data-icon="">Sign Up</a>
                    </form>


              </div>

          </div>

CSS

div[data-role="content"]
{
    height:100%;
    
}

JavaScript

var documentHeight = $(document).height()
var windowHeight = $(window).height();
var formHeight = $('#homepage form').height();
    var marginTop = (documentHeight/2) - 
       formHeight/2;
$('#homepage .ui-content').css('paddingTop',0);

$('#homepage .ui-content').css('marginTop',marginTop+'px');


console.log('document height = '+ documentHeight);
console.log('document Height /2'+ documentHeight/2);

console.log('margin-top = ' + marginTop);