From 9488a98da022f085dfeab4bc0e26724f44bc8557 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Wed, 18 Jul 2018 11:20:57 -0400
Subject: [PATCH] fix(modal): use flex to position modal to make it easier to
 size

closes #14392
---
 core/src/components/modal/modal.scss | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/core/src/components/modal/modal.scss b/core/src/components/modal/modal.scss
index 280596b17c..73e7fac2a8 100644
--- a/core/src/components/modal/modal.scss
+++ b/core/src/components/modal/modal.scss
@@ -8,7 +8,9 @@ ion-modal {
 
   position: absolute;
 
-  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   contain: strict;
 }
@@ -27,24 +29,17 @@ ion-modal-controller {
 .modal-wrapper {
   z-index: 10;
 
+  width: 100%;
   height: 100%;
 
   contain: strict;
 
   @media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) {
-    @include position(calc(50% - (#{$modal-inset-height-small}/2)), null, null, calc(50% - (#{$modal-inset-width}/2)));
-
-    position: absolute;
-
     width: $modal-inset-width;
     height: $modal-inset-height-small;
   }
 
   @media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-large) {
-    @include position(calc(50% - (#{$modal-inset-height-large}/2)), null, null, calc(50% - (#{$modal-inset-width}/2)));
-
-    position: absolute;
-
     width: $modal-inset-width;
     height: $modal-inset-height-large;
   }