How to vertically center the login form?

So I’ve grabbed a copy of your login demo (https://demo.mobiscroll.com/jquery/forms/login#) and modified some of the css so that the inputs don’t stretch all the way across on bigger screens, but I also want the form to center vertically on the page.

Basically the problem is if I load this page on my phone and rotate my phone into landscape mode, the sign in button is out of view and I can’t even scroll down to see it. It’s just hidden. What’s the reason that it’s designed this way? And how can I override it?

My first strategy was to make the form 100% high and then vertically align the form within it. So the form now indeed fills 100% of the height but the div that holds the form inputs I just can not get it to vertically center within that form. It’s stuck to the top of the screen for some reason.

Here’s what my html looks like now

<div mbsc-page class="demo-login" style='height:100%'>
<form class="md-login-form" mbsc-form style='height:100%'>
    <div style='max-width:400px;margin:0 auto'>
    <div class="md-logo micons icon-mbsc-logo"><img src='images/logo.wide.png'></div>
    <div class="mbsc-form-group-inset">
        <label>
            <input mbsc-input id="email" type="email" name="email" placeholder="Email" />
        </label>
        <label>
            <input mbsc-input name="password" type="text" placeholder="Password" data-password-toggle="true" data-icon="none" data-icon-align="right" />
        </label>
    </div>
    <div class="mbsc-form-group-inset mbsc-padding mbsc-align-center">
        <a href="#" class="md-signup">Don't have an account yet? Sign up.</a>
        <br><br>
        <a href="#" class="md-login">Forgot password?</a>
    </div>
    <div class="mbsc-form-group-inset mbsc-padding">
        <button mbsc-button class="mbsc-btn-block md-signup-btn" type="submit">Sign in</button>
    </div>
    </div>
</form>
</div>

What’s happening that this form refuses to center?

Hi Vincent,

I could not reproduce the scrolling/hidden button problem, however, I have modified your example to place the form in the middle of the screen (I just used the border to illustrate the edges of the container):

<div mbsc-page class="demo-login">
    <form class="md-login-form" mbsc-form style='position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;border:1px solid green;'>
        <div style='max-width:400px;margin:0 auto'>
            <div class="md-logo micons icon-mbsc-logo"><img src='images/logo.wide.png'></div>
            <div class="mbsc-form-group-inset">
                <label>
            <input mbsc-input id="email" type="email" name="email" placeholder="Email" />
        </label>
                <label>
            <input mbsc-input name="password" type="text" placeholder="Password" data-password-toggle="true" data-icon="none" data-icon-align="right" />
        </label>
            </div>
            <div class="mbsc-form-group-inset mbsc-padding mbsc-align-center">
                <a href="#" class="md-signup">Don't have an account yet? Sign up.</a>
                <br><br>
                <a href="#" class="md-login">Forgot password?</a>
            </div>
            <div class="mbsc-form-group-inset mbsc-padding">
                <button mbsc-button class="mbsc-btn-block md-signup-btn" type="submit">Sign in</button>
            </div>
        </div>
    </form>
</div>

Is this what you were looking for?