Set the display to center using Ionic

If you are developing apps focusing only on mobile, you may not be facing display issue as the user won't be able to see gaps or alignment problem. However, if you are developing apps that required to run on multiple platforms including web and mobile, aligning your display may cause a problem.

You will spend lots of time to configure your .css (or .scss) and when you thought you solved the problem on mobile, it shows differently on web.

I too faced such difficulties and finally found a way to solve it. I'm using ion-card and ion-list together.

here are snapshot of the code

<ion-card-content style="justify-content: center; margin-left: 0px; margin-right:

0px;background-color: #000000;">

<ion-card-title style="color: #fcfa87">

Center content <br> Working together

</ion-card-title>

<ion-list no-lines style="justify-content: center; margin-left: 0px;

margin-right: 0px; background-color: #030303;">

<ion-item style="background-color: #f1f7d6;">

<ion-label floating class="item item-input">Username</ion-label>

<ion-input type="text" name="username" class="input-label"></ion-input>

</ion-item>

and of course you need to configure your .scss too

snapshot of the code

.displayed {

display: block;

margin-left: auto;

margin-right: auto;

}

.card{

width:100%;

margin: auto;

}

the first (.displayed) shall be call by your ion-content tags and the .card is automatically set the card to be 100% width depending on your screen size

and it shall be displaying nicely on any screen as shown below

On web browser

On iPhone 7

For complete source code, you can download from my github.

All the best coding :)