Ionic 4 popup showing bottom of screen on first time

I am using my custom popup with popupcontroller. Problem is when popup is opening first time in app. then its showing in end of screen but on second time view its showing in center. I need it to show always center not on bottom or end.

Here is my code

home.ts

  async presentPopover(popData) {
    const popover = await this.popoverController.create({
      component: RedeemPopupComponent,
       componentProps: {
        "title": popData.title,
        "sub": popData.sub,
        "img": popData.img,
        "button": popData.button,
      },
      translucent: true,
      backdropDismiss: false
    });
    return await popover.present();
  }

popup.html

I am using my custom popup with popupcontroller. Problem is when popup is opening first time in app. then its showing in end of screen but on second time view its showing in center. I need it to show always center not on bottom or end.

Here is my code

home.ts

  async presentPopover(popData) {
    const popover = await this.popoverController.create({
      component: RedeemPopupComponent,
       componentProps: {
        "title": popData.title,
        "sub": popData.sub,
        "img": popData.img,
        "button": popData.button,
      },
      translucent: true,
      backdropDismiss: false
    });
    return await popover.present();
  }

popup.html

<ion-card style="background-color: white; border-color: 2px solid #1d808c">


    <div style="text-align: right;" (click)="cancel()">
        <ion-icon name="close" style="font-size: 25px;" color="secondary"></ion-icon>
    </div>

      <div style="text-align: center;" *ngIf="img">
        <img src="{{img}}">
      </div>
      <h3 class="ion-margin-top ion-text-center"  style="color: #1d808c" *ngIf="title">
        {{title}}
      </h3>
      <h5 class="ion-text-center"   style="color: #1d808c" *ngIf="sub">
        {{sub}}
      </h5>

    <div style="margin-top: 30px;text-align: center;" *ngIf="button == 'CLOSE'">
      <ion-button color="secondary" style="font-size: 20px;width: 140px;height: 56px;--border-radius: 140px !important;font-weight: 600;text-transform: none;" (click)="cancel()">{{button}}</ion-button>
    </div>
    <div style="margin-top: 30px;text-align: center;" *ngIf="button == 'REDEEM'" (click)="redeem()">
      <ion-button color="secondary" style="font-size: 20px;width: 140px;height: 56px;--border-radius: 140px !important;font-weight: 600;text-transform: none;" (click)="cancel()">{{button}}</ion-button>
    </div>
</ion-card>

Also attach the image its show the popup in bottom only for first time when its open after open whn ill open second time its showing in center

You should use modalController instead of popoverController.

In addition, with cssClass, you can set the size and the position of the popup page with any values.