How to center a popOver horizontally and vertically?

hi, how do i center a popOver without target element.
i tried to set it programmatically on popOver opened event , but there is a flicker because it first opens on top left then goes to center

Having the same issue. Trying to open a popover in the center of page. Using core (no React or Vue)

Anyone knows a solution for it?

popover never meant to be centered, as the name suggests, it pops over the event target
i used custom dialog for my case. its already centered and you can customize the width, height, bg …

Thanks. You are right that dialog is better suited to this kind of situation. Initially i did use dialog because from documentation is not clear that the content can be customized. I will take a look how can be customized.

In the mean time i did the following to center popover (its a method of a custom element / web component):

  selectAttendanceSessionClick() {
    const pageElement = this.querySelector('.page-content')
    const popoverWidth =
      parseInt(pageElement.style.getPropertyValue('--f7-popover-width'), 10) || 260
    const { offsetWidth: pageWidth, offsetHeight: pageHeight } = pageElement

    const targetX = Math.trunc((pageWidth - popoverWidth) / 2)
    const targetY = Math.trunc((pageHeight - 360) / 2)
    const popoverEl = this.querySelector('select-attendance-session-popover')

    this.selectAttendancePopover = this.$app.popover.create({
      el: popoverEl,
      targetX,
      targetY,
      on: {
        closed: async () => {
          await 0
          this.selectAttendancePopover.destroy()
        },
      },
    })
    this.selectAttendancePopover.open()
  }