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('--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,
      on: {
        closed: async () => {
          await 0

Custom Dialog


<div className="dialog custom-dialog">

    <div className="dialog-inner">

        <div className="dialog-title">
            Dialog Title

        <div className="dialog-text">
            Dialog Text


    <div className="dialog-buttons">
	    <span className="dialog-button">Cancel</span>
	    <span className="dialog-button">OK</span>



const customDialog = f7.dialog.create({
    el: '.custom-dialog'

Customize Dialog:

.custom-dialog {
    width: 75%;