title: Render content of ion-content to the centre of screen in IONIC 2/3
body: <p>I have created a   login page with username  and  password  inputs  followed  by button  and  hyperlink.
  I  want  to place  entire  ion-content  to  centre of  screen  both  horizantally  and  vertically.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ion-content {
    position: absolute;
    top: 50%;
    left: 0%;
    right: 50%;
    margin: 0 auto;
    margin-top: 0;
    margin-left: 0;
  }
  
  // .div1 {
  //     position: absolute;
  //     background-color: green;
  //     top: 0;
  //     left: 0;
  //     right: 0;
  //     bottom: 0;
  //     display: block;
  //     width: 100%;
  //     height: 100%; // contain: layout size style;
  // }
  // // .Absolute-Center {
  // //   margin: auto;
  // //   position: absolute;
  // //   top: 0; left: 0; bottom: 0; right: 0;
  // // }
  // div {
  //     position: absolute;
  //     top: 0;
  //     bottom: 0;
  //     left: 0;
  //     right: 0;
  //     margin: auto;
  //     width: 100%;
  //     height: 100%;
  //     background-color: transparent;
  // }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ion-header&gt;
  
    &lt;ion-navbar&gt;
      &lt;ion-title&gt;login&lt;/ion-title&gt;
    &lt;/ion-navbar&gt;
  
  &lt;/ion-header&gt;
  
  
  &lt;ion-content&gt;
  
  
    &lt;ion-item&gt;
      &lt;ion-label floating&gt;User Name&lt;/ion-label&gt;
      &lt;ion-input [(ngModel)]="user.username" type="text" style="background-color:transparent"&gt;&lt;/ion-input&gt;
    &lt;/ion-item&gt;
    &lt;ion-item&gt;
      &lt;ion-label floating&gt;Password&lt;/ion-label&gt;
      &lt;ion-input [(ngModel)]="user.password" type="password"&gt;&lt;/ion-input&gt;
    &lt;/ion-item&gt;
    &lt;button padding (click)="homePage()" color=secondary ion-button full round&gt;Login&lt;/button&gt;
    &lt;a (click)="registerPage()"&gt;New ? Register here&lt;/a&gt;
  
  
  &lt;/ion-content&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Can  you  suggest  some  other  ways  to  achieve it. the  output  should  be  very responsive.</p>