<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="well login-box"> <legend>Login</legend> <div class="form-group"> <label for="username-email">E-mail or Username</label> <input value='' id="username-email" placeholder="E-mail or Username" type="text" class="form-control" /> </div> <div class="form-group"> <label for="password">Password</label> <input id="password" value='' placeholder="Password" type="text" class="form-control" /> </div> <div class="form-group text-center"> <button type="button" class="btn btn-success btn-login-submit" >Login</button> </div> </div> </div> </div> </div>

body { background: -webkit-linear-gradient(90deg, #FF512F 10%, #DD2476 90%); background: -moz-linear-gradient(90deg, #FF512F 10%, #DD2476 90%); background: -ms-linear-gradient(90deg, #FF512F 10%, #DD2476 90%); background: -o-linear-gradient(90deg, #FF512F 10%, #DD2476 90%); background: linear-gradient(90deg, #FF512F 10%, #DD2476 90%); font-family: 'Open Sans', sans-serif!important; } .well{ background-color:#fff!important; border-radius:0!important; border:none!important; } .well.login-box { width:300px; margin:0 auto; } .well.login-box legend { font-size:26px; text-align:center; font-weight:300; } .well.login-box label { font-weight:300; font-size:16px; } .well.login-box input[type="text"] { box-shadow:none; border-color:#ddd; border-radius:0; } .well.welcome-text{ font-size:21px; }

function varticalCenterStuff() { var windowHeight = $(window).height(); var loginBoxHeight = $('.login-box').innerHeight(); var welcomeTextHeight = $('.welcome-text').innerHeight(); var loggedIn = $('.logged-in').innerHeight(); var mathLogin = (windowHeight / 2) - (loginBoxHeight / 2); var mathWelcomeText = (windowHeight / 2) - (welcomeTextHeight / 2); var mathLoggedIn = (windowHeight / 2) - (loggedIn / 2); $('.login-box').css('margin-top', mathLogin); $('.welcome-text').css('margin-top', mathWelcomeText); $('.logged-in').css('margin-top', mathLoggedIn); } $(window).resize(function () { varticalCenterStuff(); }); $( document ).ready(function() { varticalCenterStuff(); });