How to set the avatar correctly on the bottom|center of the image?

[gokujy]

Hello,

Add this in page.html file

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <div class="container">
    <ion-img src="../../assets/img_avatar.png" alt="Avatar" class="image"></ion-img>
    <div class="overlay">
      <ion-avatar>
        <img src="../../assets/feature_sms_reader_icon.png" alt="Avatar" class="image">
      </ion-avatar>
    </div>
  </div>
</ion-content>

add this scss

.container {
  position: relative;
}
.image {
  display: block;
  width: 100%;
  height: auto;
}
.overlay {
  position: absolute;
  bottom: 0px;
  color: #f1f1f1;
  width: 100%;
  transition: 0.5s ease;
  opacity: 0;
  color: white;
  font-size: 20px;
  padding: 20px 0 0 0;
  text-align: center;
  opacity: 1;
  left: 32%;
  top: 77%;
}
ion-card {
  width: auto;
  height: 500px;
}
ion-avatar {
  width: auto;
  height: auto;

  img {
    width: 36%;
  }
}

add center image height as your requirement in this class .overlay { top:77%;}
cheers