diff --git a/core/src/components/popover/animations/ios.enter.ts b/core/src/components/popover/animations/ios.enter.ts
index f30364b7a4d..7af32a978e8 100644
--- a/core/src/components/popover/animations/ios.enter.ts
+++ b/core/src/components/popover/animations/ios.enter.ts
@@ -30,7 +30,7 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
     originY: 'top'
   }
 
-  const results = getPopoverPosition(isRTL, contentWidth, contentHeight, arrowWidth, arrowHeight, reference, side, align, defaultPosition, trigger, ev);
+  const results = getPopoverPosition(isRTL, contentWidth, contentHeight, arrowWidth, arrowHeight, reference, side, align, defaultPosition, size, trigger, ev);
 
   const padding = size === 'cover' ? 0 : POPOVER_IOS_BODY_PADDING;
   const margin = size === 'cover' ? 0 : 25;
diff --git a/core/src/components/popover/animations/md.enter.ts b/core/src/components/popover/animations/md.enter.ts
index 04c503676a8..2555be804d7 100644
--- a/core/src/components/popover/animations/md.enter.ts
+++ b/core/src/components/popover/animations/md.enter.ts
@@ -29,7 +29,7 @@ export const mdEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
     originY: 'top'
   }
 
-  const results = getPopoverPosition(isRTL, contentWidth, contentHeight, 0, 0, reference, side, align, defaultPosition, trigger, ev);
+  const results = getPopoverPosition(isRTL, contentWidth, contentHeight, 0, 0, reference, side, align, defaultPosition, size, trigger, ev);
 
   const padding = size === 'cover' ? 0 : POPOVER_MD_BODY_PADDING;
 
diff --git a/core/src/components/popover/test/arrow/e2e.ts b/core/src/components/popover/test/arrow/e2e.ts
index 3d5c7fdbad4..959963872ad 100644
--- a/core/src/components/popover/test/arrow/e2e.ts
+++ b/core/src/components/popover/test/arrow/e2e.ts
@@ -1,44 +1,37 @@
 import { newE2EPage } from '@stencil/core/testing';
 
-test('popover - arrow side: top', async () => {
-  await testPopover('top', false);
-});
-
-test('popover - arrow side: right', async () => {
-  await testPopover('right', false);
-});
-
-test('popover - arrow side: bottom', async () => {
-  await testPopover('bottom', false);
-});
-
-test('popover - arrow side: left', async () => {
-  await testPopover('left', false);
-});
-
-test('popover - arrow side: start', async () => {
-  await testPopover('start'), false;
-});
-
-test('popover - arrow side: end', async () => {
-  await testPopover('end', false);
-});
-
-test('popover - arrow side: start, rtl', async () => {
-  await testPopover('start', false, true);
-});
-
-test('popover - arrow side: end, rtl', async () => {
-  await testPopover('end', false, true);
-});
-
+const popoverNames =  [
+  'top-auto',
+  'right-auto',
+  'bottom-auto',
+  'left-auto',
+  'start-auto',
+  'end-auto',
+  'bottom-auto-center',
+  'bottom-auto-end',
+  'top-cover',
+  'right-cover',
+  'bottom-cover',
+  'left-cover',
+  'start-cover',
+  'end-cover',
+  'bottom-cover-center',
+  'bottom-cover-end'
+];
+
+for (const popoverName of popoverNames) {
+  test(`popover - arrow - ${popoverName}`, async () => {
+    await testPopover(popoverName, false);
+    await testPopover(popoverName, true);
+  });
+}
 
-const testPopover = async (side, isRTL = false) => {
+const testPopover = async (popoverName, isRTL = false) => {
   const rtl = isRTL ? '&rtl=true' : '';
   const page = await newE2EPage({ url: `/src/components/popover/test/arrow?ionic:_testing=true${rtl}` });
 
-  const POPOVER_CLASS = `${side}-popover`;
-  const TRIGGER_ID = `${side}-trigger`;
+  const POPOVER_CLASS = `${popoverName}-popover`;
+  const TRIGGER_ID = `${popoverName}-trigger`;
   const screenshotCompares = [];
 
   const trigger = await page.find(`#${TRIGGER_ID}`);
diff --git a/core/src/components/popover/test/arrow/index.html b/core/src/components/popover/test/arrow/index.html
index 1b5fa134378..dd92276a51e 100644
--- a/core/src/components/popover/test/arrow/index.html
+++ b/core/src/components/popover/test/arrow/index.html
@@ -11,13 +11,18 @@
   <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
   <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
   <style>
+  #content {
+    --padding-top: 100px;
+    --padding-bottom: 100px;
+    --padding-start: 100px;
+    --padding-end: 100px;
+  }
+
   .grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-row-gap: 20px;
     grid-column-gap: 20px;
-
-    padding: 200px;
   }
   .grid-item {
     margin: 0 auto;
@@ -47,17 +52,88 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content class="ion-padding" id="content">
+    <ion-content id="content">
+      <h1>Size: Auto</h1>
+      <div class="grid">
+        <div class="grid-item">
+          <h2>Top</h2>
+          <ion-button id="top-auto-trigger">Click to Open</ion-button>
+          <ion-popover class="top-auto-popover" trigger="top-auto-trigger" side="top">
+            <ion-content class="ion-padding">
+              Hello World
+            </ion-content>
+          </ion-popover>
+        </div>
+        <div class="grid-item">
+          <h2>Right</h2>
+          <ion-button id="right-auto-trigger">Click to Open</ion-button>
+          <ion-popover class="right-auto-popover" trigger="right-auto-trigger" side="right">
+            <ion-content class="ion-padding">
+              Hello World
+            </ion-content>
+          </ion-popover>
+        </div>
+        <div class="grid-item">
+          <h2>Bottom</h2>
+          <ion-button id="bottom-auto-trigger">Click to Open</ion-button>
+          <ion-popover class="bottom-auto-popover" trigger="bottom-auto-trigger" side="bottom">
+            <ion-content class="ion-padding">
+              Hello World
+            </ion-content>
+          </ion-popover>
+        </div>
+        <div class="grid-item">
+          <h2>Left</h2>
+          <ion-button id="left-auto-trigger">Click to Open</ion-button>
+          <ion-popover class="left-auto-popover" trigger="left-auto-trigger" side="left">
+            <ion-content class="ion-padding">
+              Hello World
+            </ion-content>
+          </ion-popover>
+        </div>
+        <div class="grid-item">
+          <h2>Start</h2>
+          <ion-button id="start-auto-trigger">Click to Open</ion-button>
+          <ion-popover class="start-auto-popover" trigger="start-auto-trigger" side="start">
+            <ion-content class="ion-padding">
+              Hello World
+            </ion-content>
+          </ion-popover>
+        </div>
+        <div class="grid-item">
+          <h2>End</h2>
+          <ion-button id="end-auto-trigger">Click to Open</ion-button>
+          <ion-popover class="end-auto-popover" trigger="end-auto-trigger" side="end">
+            <ion-content class="ion-padding">
+              Hello World
+            </ion-content>
+          </ion-popover>
+        </div>
+        <div class="grid-item">
+          <h2>Bottom, center-aligned</h2>
+          <ion-button id="bottom-auto-center-trigger">Click to Open</ion-button>
+          <ion-popover class="bottom-auto-center-popover" trigger="bottom-auto-center-trigger" side="bottom" alignment="center">
+            <ion-content class="ion-padding">
+              Hello World
+            </ion-content>
+          </ion-popover>
+        </div>
+        <div class="grid-item">
+          <h2>Bottom, end-aligned</h2>
+          <ion-button id="bottom-auto-end-trigger">Click to Open</ion-button>
+          <ion-popover class="bottom-auto-end-popover" trigger="bottom-auto-end-trigger" side="bottom" alignment="end">
+            <ion-content class="ion-padding">
+              Hello World
+            </ion-content>
+          </ion-popover>
+        </div>
+      </div>
+      <h1>Size: Cover</h1>
       <div class="grid">
         <div class="grid-item">
           <h2>Top</h2>
-          <ion-button id="top-trigger">Click to Open</ion-button>
-          <ion-popover
-            class="top-popover"
-            trigger="top-trigger"
-            side="top"
-            size="cover"
-          >
+          <ion-button id="top-cover-trigger">Click to Open</ion-button>
+            <ion-popover class="top-cover-popover" trigger="top-cover-trigger" side="top" size="cover">
             <ion-content class="ion-padding">
               Hello World
             </ion-content>
@@ -65,13 +141,8 @@ <h2>Top</h2>
         </div>
         <div class="grid-item">
           <h2>Right</h2>
-          <ion-button id="right-trigger">Click to Open</ion-button>
-          <ion-popover
-            class="right-popover"
-            trigger="right-trigger"
-            side="right"
-            size="cover"
-          >
+          <ion-button id="right-cover-trigger">Click to Open</ion-button>
+            <ion-popover class="right-cover-popover" trigger="right-cover-trigger" side="right" size="cover">
             <ion-content class="ion-padding">
               Hello World
             </ion-content>
@@ -79,13 +150,8 @@ <h2>Right</h2>
         </div>
         <div class="grid-item">
           <h2>Bottom</h2>
-          <ion-button id="bottom-trigger">Click to Open</ion-button>
-          <ion-popover
-            class="bottom-popover"
-            trigger="bottom-trigger"
-            side="bottom"
-            size="cover"
-          >
+          <ion-button id="bottom-cover-trigger">Click to Open</ion-button>
+            <ion-popover class="bottom-cover-popover" trigger="bottom-cover-trigger" side="bottom" size="cover">
             <ion-content class="ion-padding">
               Hello World
             </ion-content>
@@ -93,13 +159,8 @@ <h2>Bottom</h2>
         </div>
         <div class="grid-item">
           <h2>Left</h2>
-          <ion-button id="left-trigger">Click to Open</ion-button>
-          <ion-popover
-            class="left-popover"
-            trigger="left-trigger"
-            side="left"
-            size="cover"
-          >
+          <ion-button id="left-cover-trigger">Click to Open</ion-button>
+            <ion-popover class="left-cover-popover" trigger="left-cover-trigger" side="left" size="cover">
             <ion-content class="ion-padding">
               Hello World
             </ion-content>
@@ -107,13 +168,8 @@ <h2>Left</h2>
         </div>
         <div class="grid-item">
           <h2>Start</h2>
-          <ion-button id="start-trigger">Click to Open</ion-button>
-          <ion-popover
-            class="start-popover"
-            trigger="start-trigger"
-            side="start"
-            size="cover"
-          >
+          <ion-button id="start-cover-trigger">Click to Open</ion-button>
+            <ion-popover class="start-cover-popover" trigger="start-cover-trigger" side="start" size="cover">
             <ion-content class="ion-padding">
               Hello World
             </ion-content>
@@ -121,13 +177,26 @@ <h2>Start</h2>
         </div>
         <div class="grid-item">
           <h2>End</h2>
-          <ion-button id="end-trigger">Click to Open</ion-button>
-          <ion-popover
-            class="end-popover"
-            trigger="end-trigger"
-            side="end"
-            size="cover"
-          >
+          <ion-button id="end-cover-trigger">Click to Open</ion-button>
+            <ion-popover class="end-cover-popover" trigger="end-cover-trigger" side="end" size="cover">
+            <ion-content class="ion-padding">
+              Hello World
+            </ion-content>
+          </ion-popover>
+        </div>
+        <div class="grid-item">
+          <h2>Bottom, center-aligned</h2>
+          <ion-button id="bottom-cover-center-trigger">Click to Open</ion-button>
+          <ion-popover class="bottom-cover-center-popover" trigger="bottom-cover-center-trigger" side="bottom" alignment="center" size="cover">
+            <ion-content class="ion-padding">
+              Hello World
+            </ion-content>
+          </ion-popover>
+        </div>
+        <div class="grid-item">
+          <h2>Bottom, end-aligned</h2>
+          <ion-button id="bottom-cover-end-trigger">Click to Open</ion-button>
+          <ion-popover class="bottom-cover-end-popover" trigger="bottom-cover-end-trigger" side="bottom" alignment="end" size="cover">
             <ion-content class="ion-padding">
               Hello World
             </ion-content>
@@ -137,22 +206,6 @@ <h2>End</h2>
     </ion-content>
 
   </ion-app>
-
-  <script>
-  class ListPage extends HTMLElement {
-    constructor() {
-      super();
-
-      this.innerHTML = `
-      <ion-content class="ion-padding">
-        Hello
-      </ion-content>
-      `;
-    }
-  }
-
-  customElements.define('list-page', ListPage);
-  </script>
 </body>
 
 </html>
diff --git a/core/src/components/popover/utils.ts b/core/src/components/popover/utils.ts
index 296a373234f..85a080a7007 100644
--- a/core/src/components/popover/utils.ts
+++ b/core/src/components/popover/utils.ts
@@ -451,6 +451,7 @@ export const getPopoverPosition = (
   side: PositionSide,
   align: PositionAlign,
   defaultPosition: PopoverPosition,
+  size: PopoverSize,
   triggerEl?: HTMLElement,
   event?: MouseEvent | CustomEvent,
 ): PopoverPosition => {
@@ -461,6 +462,19 @@ export const getPopoverPosition = (
     height: 0
   };
 
+  const customEv = event as CustomEvent;
+
+  /**
+   * ionShadowTarget is used when we need to align the
+   * popover with an element inside of the shadow root
+   * of an Ionic component. Ex: Presenting a popover
+   * by clicking on the collapsed indicator inside
+   * of `ion-breadcrumb` and centering it relative
+   * to the indicator rather than `ion-breadcrumb`
+   * as a whole.
+   */
+  const actualTriggerEl = (triggerEl || customEv?.detail?.ionShadowTarget || customEv?.target) as HTMLElement | null;
+
   /**
    * Calculate position relative to the
    * x-y coordinates in the event that
@@ -492,18 +506,6 @@ export const getPopoverPosition = (
      */
     case 'trigger':
     default:
-      const customEv = event as CustomEvent;
-
-      /**
-       * ionShadowTarget is used when we need to align the
-       * popover with an element inside of the shadow root
-       * of an Ionic component. Ex: Presenting a popover
-       * by clicking on the collapsed indicator inside
-       * of `ion-breadcrumb` and centering it relative
-       * to the indicator rather than `ion-breadcrumb`
-       * as a whole.
-       */
-      const actualTriggerEl = (triggerEl || customEv?.detail?.ionShadowTarget || customEv?.target) as HTMLElement | null;
       if (!actualTriggerEl) {
         return defaultPosition;
       }
@@ -535,7 +537,8 @@ export const getPopoverPosition = (
   const top = coordinates.top + alignedCoordinates.top;
   const left = coordinates.left + alignedCoordinates.left;
 
-  const { arrowTop, arrowLeft } = calculateArrowPosition(side, arrowWidth, arrowHeight, top, left, contentWidth, contentHeight, isRTL);
+  const triggerElWidth = actualTriggerEl ? actualTriggerEl.offsetWidth : undefined;
+  const { arrowTop, arrowLeft } = calculateArrowPosition(side, arrowWidth, arrowHeight, top, left, contentWidth, contentHeight, isRTL, align, size, triggerElWidth);
 
   const { originX, originY } = calculatePopoverOrigin(side, align, isRTL);
 
@@ -604,27 +607,50 @@ const calculateArrowPosition = (
   left: number,
   contentWidth: number,
   contentHeight: number,
-  isRTL: boolean
+  isRTL: boolean,
+  align: PositionAlign,
+  size: PopoverSize,
+  triggerElWidth?: number
 ) => {
   /**
    * Note: When side is left, right, start, or end, the arrow is
    * been rotated using a `transform`, so to move the arrow up or down
    * by its dimension, you need to use `arrowWidth`.
    */
-  const leftPosition = { arrowTop: top + (contentHeight / 2) - (arrowWidth / 2), arrowLeft: left + contentWidth - (arrowWidth / 2) };
+  const leftPosition = {
+    arrowTop: top + (contentHeight / 2) - (arrowWidth / 2),
+    arrowLeft: left + contentWidth - (arrowWidth / 2)
+  };
 
   /**
    * Move the arrow to the left by arrowWidth and then
    * again by half of its width because we have rotated
    * the arrow using a transform.
    */
-  const rightPosition = { arrowTop: top + (contentHeight / 2) - (arrowWidth / 2), arrowLeft: left - (arrowWidth * 1.5) }
+  const rightPosition = {
+    arrowTop: top + (contentHeight / 2) - (arrowWidth / 2),
+    arrowLeft: left - (arrowWidth * 1.5)
+  };
+
+  /**
+   * For alignment="center", position the arrow relative to the popover.
+   * For other alignments, position it relative to the trigger el.
+   */
+  const targetWidth = align === 'center' || triggerElWidth === undefined ? contentWidth : triggerElWidth;
+
+  const offset = align === 'end' && size === 'auto' ? (contentWidth / 2) - arrowWidth : 0;
 
   switch (side) {
     case 'top':
-      return { arrowTop: top + contentHeight, arrowLeft: left + (contentWidth / 2) - (arrowWidth / 2) }
+      return {
+        arrowTop: top + contentHeight,
+        arrowLeft: left + (targetWidth / 2) - (arrowWidth / 2) + offset
+      }
     case 'bottom':
-      return { arrowTop: top - arrowHeight, arrowLeft: left + (contentWidth / 2) - (arrowWidth / 2) }
+      return {
+        arrowTop: top - arrowHeight,
+        arrowLeft: left + (targetWidth / 2) - (arrowWidth / 2) + offset
+      }
     case 'left':
       return leftPosition;
     case 'right':