I want ion-list to be vertical middle and horizontal center

Ionic Framework ionic-v3
1

q1
q1.PNG2374Ă—632 6.47 KB

I want ion-list to be vertical middle and horizontal center like capturer.
How can I do it?

/////////////////////////////////////////////////////////////////////////////////////////////////////

here is my code.

signin.html

<ion-content class="icontent" padding>
  
  <ion-list class="ilist">
    <ion-item>
      <ion-label floating>Email</ion-label>
      <ion-input type="email" [(ngModel)]="email"required></ion-input>
    </ion-item>
    <ion-item>
      <ion-label floating>Password</ion-label>
      <ion-input type="password" [(ngModel)]="password" required></ion-input>
    </ion-item>
    <ion-item>
      <button ion-button block (click)="signIn()">SIGN IN</button>
      <div>Don't have an account? <a>Sign up</a></div>
    </ion-item>
  </ion-list>
</ion-content>

signin.scss

page-signin {

    .icontent {

        .scroll-content {
            background-color: black;
        }

        .ilist {
            width: 30%;
            min-width: 270px;
        }
    }

}
1 Like
2

its possible with some css tricks…

.scroll-content{
    justify-content: center;
	display: flex!important;
 	align-items: center!important;
}

Try this…n let me know how it went for you!

8 Likes
3

wow… It works very well. Thank you.!