Center login form from Youtube Ionic Creator Tutorials

[aenforcer]

Hi, first times on Ionic, I´m working around youtube " Ionic Creator Tutorials // Ionic Auth Part 1 // Login & Signup Design" from Matt ( https://www.youtube.com/watch?v=T7RKbd5fLag) I have follow steps and download code from your github link.

But I have a problem: on chrome preview, login form is ok, is centered on screen in all devices emulated (android nexus, ios iphones,ipads, etc… )but when ionic build and run on real android device (for example: sony experia m, and lenovo) login form go bottom down right.

This is the html form (generated by ionic creator following tutorial steps):

<ion-view title="Login" hide-nav-bar="true" cache-view="false" nav-transition="none" id="page4" style="">
  <ion-content padding="true" style="background: url(img/bg.png) no-repeat center;background-size:cover;" class="manual-ios-statusbar-padding" scroll="false">
    <div ng-if="error" id="login-markdown2" class="show-list-numbers-and-dots error-box">
      <div class="error-p"> {{error}} </div>
    </div>
    <form id="login-form3" class="list center-form">
      <div>
        <img src="img/loginicon.png" style="display: block; width: 100%; height: auto; margin-left: auto; margin-right: auto;"/>
      </div>
      <ion-list id="login-list5">
        <label class="item item-input top-input" id="login-input5">
          <input placeholder="username" type="text" ng-model="data.username">
        </label>
        <label class="item item-input bottom-input" id="login-input6">
          <input placeholder="Password" type="password" ng-model="data.password">
        </label>
      </ion-list>
      <div class="spacer" style="width: 300px; height: 10px;"></div>
      <a id="login-button4" class="button button-positive  button-block" ng-click="login()">Login</a>
    </form>
  </ion-content>
</ion-view>

and this the css file (download from github):

.center-form{
    
  width:290px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 
    label{
        background-color: rgba(255,255,255,0.7);
        border-color: rgba(255,255,255,0);
        
        &.top-input{
            border-radius: 4px 4px 0px 0px !important;
        }
        
        &.bottom-input{
            border-radius: 0px 0px 4px 4px !important;
        }
    }
    
    .button-positive{
        opacity:0.9;
    }
    
}

.error-box{
    padding:10px;
    border:1px solid darken(#FA5858, 10%);
    background-color: #FA5858;
    border-radius:4px;
    margin-bottom:10px;
}

I attach two previews, login screen on web emulators and on android device.

View on web emulator:

View on android real device:

Thanks for help.

[aenforcer]

Hi guys, finally I resolve it, I hope helps somebody, this is my configuration that works on web and android devices:

CSS:

#login {
  background: #1c2627 url("../img/backgroundlogin.png") no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  .scroll-content {
    display: table !important;
    width: 100% !important;
    height: 100% !important;



    form {
      display: table-cell;
      vertical-align: middle;

      .header {
        padding-bottom: 20px;

        img {
          display: block;
          width: 80%;
          margin: 0 auto;
        }
      }

      .button.button-light.active, .button.button-light.activated {
        color: #fff;
        opacity: inherit;
      }
    }
  }

}

.center{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

html:

<ion-view id="login" hide-nav-bar="true">
    <div ng-if="error" id="login-markdown2" class="show-list-numbers-and-dots error-box">
      <div class="error-p"> {{error}} </div>
    </div>
    <ion-content padding="true" scroll="false" class="center">

        <form id="login-form3">
            <div class="row responsive-md">
                <div class="col col-50 col-offset-25">

                    <div class="header padding text-center">
                         <img src="img/loginicon.png" style="display: block; width: 100%; height: auto; margin-left: auto; margin-right: auto;"/>
                    </div>

                    <div class="list">
                        <label class="item item-input">
                            <input type="text" placeholder=email" ng-model="data.username">
                        </label>
                        <label class="item item-input">
                            <input placeholder="Password" type="password" ng-model="data.password">
                        </label>



                    </div>

                    <button class="button button-block button-positive" ng-click="login()">
                        Login
                    </button>

                    <div class="row row-no-padding">
                    </div>
                </div>
            </div>
        </form>
    </ion-content>
</ion-view>

Thanks