CODEWITHSUNDEEP
htmlcsssassionic2ionic3
Kartiikeya
Kartiikeya

Reputation: 2516

Render content of ion-content to the centre of screen in IONIC 2/3

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.

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;
// }
<ion-header>

  <ion-navbar>
    <ion-title>login</ion-title>
  </ion-navbar>

</ion-header>


<ion-content>


  <ion-item>
    <ion-label floating>User Name</ion-label>
    <ion-input [(ngModel)]="user.username" type="text" style="background-color:transparent"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label floating>Password</ion-label>
    <ion-input [(ngModel)]="user.password" type="password"></ion-input>
  </ion-item>
  <button padding (click)="homePage()" color=secondary ion-button full round>Login</button>
  <a (click)="registerPage()">New ? Register here</a>


</ion-content>

Can you suggest some other ways to achieve it. the output should be very responsive.

Upvotes: 2

Views: 22178

Answers (5)

Leandro Ariel
Leandro Ariel

Reputation: 1381

Do something like this:

#container {
  text-align: center;

  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

HTML

<ion-content [fullscreen]="true">
<div id="container"> 
PUT YOUR HERE CONTENT HERE 
</div>
</ion-content>

Tested in ionic/capacitor.

Upvotes: 0

Jb Randria
Jb Randria

Reputation: 101

This works for me:

<ion-grid  class="center-grid">
</ion-grid>
    ion-grid {
        &.center-grid {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) !important;
            display: block !important;
            /*width: 100%;*/
        }
    }

Upvotes: 1

sebaferreras
sebaferreras

Reputation: 44659

You could add this style rule in the app.scss file:

.vertical-center {
    .fixed-content,
    .scroll-content {
        display: flex;
        align-items: center;

        ion-list {
            max-width: 300px; 
            width:100%; 
            margin: auto; 
            text-align: center;
        }
    }
}

And then wrap the items inside of an ion-list like this:

<ion-header>
    <ion-navbar>
        <ion-title>login</ion-title>
    </ion-navbar>
</ion-header>
<ion-content padding class="vertical-center">
    <ion-list>
        <ion-item no-padding>
            <ion-label floating>User Name</ion-label>
            <ion-input [(ngModel)]="user.username" type="text" style="background-color:transparent"></ion-input>
        </ion-item>
        <ion-item no-padding>
            <ion-label floating>Password</ion-label>
            <ion-input [(ngModel)]="user.password" type="password"></ion-input>
        </ion-item>

        <button padding (click)="homePage()" color=secondary ion-button full round>Login</button>

        <a (click)="registerPage()">New ? Register here</a>
    </ion-list>
</ion-content>

Please take a look at this working plunker

Upvotes: 1

Dave
Dave

Reputation: 31

Depending on your browser support requirements, you can use the CSS3 'transform' property, combined with absolute positioning, to place the div in the middle of the page.

First, use position:absolute to place the div 50% from the top and left of the page:

position:absolute;
top:50%;
left:50%;

https://jsfiddle.net/bfdqL5um/1/
(red border is purely to illustrate the box)

This puts the top left corner of the div in the center of the page. You can then use transform/translate to move it back by 50% of it's height and width:

transform:translate(50%,50%);

The box is now perfectly centred.
https://jsfiddle.net/bfdqL5um/2/

This is supported in IE9+, and all other major browsers.

Note that with absolute positioning, you have to watch for the position of any parent elements. (i.e. if one of icon-contents parents is positioned, it may affect how the absolute positioning of this one is applied).

(First StackOverflow post so apologies if formatting or etiquette is poor!)

Upvotes: 3

sol
sol

Reputation: 22919

You can use flexbox to center content both vertically and horizontally. This might help you get started:

ion-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
<ion-header>
  <ion-navbar>
    <ion-title>login</ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <ion-item>
    <ion-label floating>User Name</ion-label>
    <ion-input [(ngModel)]="user.username" type="text" style="background-color:transparent"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label floating>Password</ion-label>
    <ion-input [(ngModel)]="user.password" type="password"></ion-input>
  </ion-item>
  <button padding (click)="homePage()" color=secondary ion-button full round>Login</button>
  <a (click)="registerPage()">New ? Register here</a>
</ion-content>

Upvotes: 0

Related Questions