How to center ionic avatar on a page

Question

I am trying to center the avatar to the middle, with the code below but it doesn't work. I have used this class="ion-align-items-center" that i got from the ionic documents but with no successs.

    <ion-grid style ="text-align: center">
     <ion-row class="ion-align-items-center" >

    <ion-col class="ion-align-items-center" *ngFor="let item of students" >
      <!--   <div  class= "imageHold" >
            <ion-img [src]= "profileImage || item.profileImage"></ion-img>
        </div> -->
        <ion-avatar class="ion-align-items-center">
            <ion-img [src]= "profileImage || item.profileImage"></ion-img>
          </ion-avatar>
    </ion-col>  
   </ion-row >
   <ion-row  style ="text-align: center">  
       <ion-col>
    <ion-button  size="small" fill="outline" (click)="chooseProfilePic()" >Choose Profile Photo</ion-button>
   </ion-col>
   </ion-row>
   </ion-grid>

I get this result

Answer 1

add a class in the avatar div.

.avatar{
   margin: auto;
}