Vertically center login form?

Question

I am using AngularJS and Ionic for building a hybrid mobile application.

This is my login form:

  <ion-content class="padding">
    <form class="list">
      <label class="item item-input">
        <input type="text" class="text-align-center" placeholder="{{ 'EMAIL' | translate }}" ng-model="credentials.email"  autocapitalize="off" autocorrect="off" spellcheck="false">
      </label>
      <label class="item item-input">
        <input type="password" class="text-align-center" placeholder="{{ 'PASSWORD' | translate }}" ng-model="credentials.password"  autocapitalize="off" autocorrect="off">
      </label>
      <button class="button button-block button-stable" type="submit" ng-click="login()">{{ 'LOGIN' | translate }}</button>
    </form>
  </ion-content>

What is a good way to make this login form vertically aligned?

See [How to vertically center a div for all browsers?](http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) — Ben Kauer, Nov 20 '15 at 07:49
@iWörk: That doesn't work. It doesn't make any change to the appearence of my form. The form is still on the top of the page — user1283776, Nov 20 '15 at 08:34

score 0 · Answer 1 · answered Nov 20 '15 at 07:58

For html

<div class="outer">
<div class="middle">
<div class="inner">
 <ion-content class="padding">
    <form class="list">
      <label class="item item-input">
        <input type="text" class="text-align-center" placeholder="{{ 'EMAIL' | translate }}" ng-model="credentials.email"  autocapitalize="off" autocorrect="off" spellcheck="false">
      </label>
      <label class="item item-input">
        <input type="password" class="text-align-center" placeholder="{{ 'PASSWORD' | translate }}" ng-model="credentials.password"  autocapitalize="off" autocorrect="off">
      </label>
      <button class="button button-block button-stable" type="submit" ng-click="login()">{{ 'LOGIN' | translate }}</button>
    </form>
  </ion-content>
</div>
</div>
</div>

For style CSS

<style>
.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.inner {
    margin-left: auto;
    margin-right: auto; 
    width: /*whatever width you want*/;
}
</style>

may be help you

Thanks for the attempt. That didn't affect the appearence of my login form. The login form is still on the top of the page after these changes. — user1283776, Nov 20 '15 at 08:17

score 0 · Answer 2 · answered Nov 20 '15 at 08:42

I tried several proposed css solution that I found, but many didn't work. I think it might have something to do with Ionics css.

This solution which is specifically for Ionic worked fo me:

http://play.ionic.io/app/6f5cda89e7fd

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
  </head>
  <body ng-app="app">
    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Awesome App</h1>
      </ion-header-bar>
      <ion-content class="padding loginForm">
        <div class="loginForm-wrapper">
          <label class="item item-input item-input-rounded">
            <input type="text" placeholder="First Name">
          </label>
          <label class="item item-input item-input-rounded">
            <input type="password" placeholder="Password">
          </label>
        </div>
      </ion-content>
    </ion-pane>
  </body>
</html>

CSS:

.loginForm .scroll {
  height: 100%;
}
  .loginForm .loginForm-wrapper {
    position: absolute;
    top: 40%;
    left: 0;
    right: 0;
  }

Vertically center login form?

2 Answers2