fix(overlay): incorrectly calculating centered position on a scrolled page with pushing

Fixes a centered flexible overlay with pushing, on a scrolled page, not calculating the position properly. There were a couple of issues:
* We were using the `top` viewport offset to calculate along the X axis, as well as `left` to calculate along Y.
* We weren't accounting correctly for the scroll position.

Fixes #11868.

Author: crisbeto

src/cdk/overlay/position/flexible-connected-position-strategy.spec.ts

@@ -1704,6 +1704,40 @@ describe('FlexibleConnectedPositionStrategy', () => {
       expect(Math.floor(overlayRect.top)).toBe(viewportMargin);
     });
 
+    it('should center flexible overlay with push on a scrolled page', () => {
+      const veryLargeElement = document.createElement('div');
+
+      originElement.style.left = '200px';
+      originElement.style.top = '200px';
+
+      veryLargeElement.style.width = '100%';
+      veryLargeElement.style.height = '2000px';
+      document.body.appendChild(veryLargeElement);
+      window.scroll(0, 250);
+
+      positionStrategy
+        .withFlexibleDimensions()
+        .withPush(true)
+        .withPositions([{
+          overlayY: 'top',
+          overlayX: 'center',
+          originY: 'bottom',
+          originX: 'center'
+        }]);
+
+      attachOverlay({positionStrategy});
+
+      const overlayRect = overlayRef.overlayElement.getBoundingClientRect();
+      const originRect = originElement.getBoundingClientRect();
+
+      expect(Math.floor(overlayRect.left - overlayRect.width / 2))
+          .toBe(Math.floor(originRect.left - originRect.width / 2));
+
+      window.scroll(0, 0);
+      document.body.removeChild(veryLargeElement);
+    });
+
+
   });
 
   describe('onPositionChange with scrollable view properties', () => {

src/cdk/overlay/position/flexible-connected-position-strategy.ts

@@ -689,8 +689,9 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
     } else {
       // If neither top nor bottom, it means that the overlay
       // is vertically centered on the origin point.
-      const smallestDistanceToViewportEdge =
-          Math.min(viewport.bottom - origin.y, origin.y - viewport.left);
+      const smallestDistanceToViewportEdge = Math.min(
+        viewport.bottom - origin.y + viewport.top, origin.y);
+
       const previousHeight = this._lastBoundingBoxSize.height;
 
       height = smallestDistanceToViewportEdge * 2;
@@ -722,8 +723,8 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
     } else {
       // If neither start nor end, it means that the overlay
       // is horizontally centered on the origin point.
-      const smallestDistanceToViewportEdge =
-          Math.min(viewport.right - origin.x, origin.x - viewport.top);
+      const smallestDistanceToViewportEdge = Math.min(
+        viewport.right - origin.x + viewport.left, origin.x);
       const previousWidth = this._lastBoundingBoxSize.width;
 
       width = smallestDistanceToViewportEdge * 2;