diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md
index cc918f7af..bd54eb3b6 100644
--- a/RELEASE-NOTES.md
+++ b/RELEASE-NOTES.md
@@ -192,6 +192,7 @@
 - **Menu** - `dropdown menu` in a `secondary pointing menu` or `tabular menu` now receive distinct active styling from other `active item`
 - **Menu** - Fixed arrow position in `pointing menu` to be more consistent, round to exact pixels and account for arrow border width
 - **Menu** - Fix issue with `pointing` arrow having too high a `z-index` and appearing above `ui dropdown menu`
+- **Modal** - Modal headers will now correctly adjust sizes using `ui header` variations
 - **Modal** - `scrollable modal` now correctly adds padding below modal
 - **Modal** - Modal with `detachable: false` inside `ui sidebar`  `pusher` element will now show correctly
 - **Popup** - Popup now correctly adjusts if `data` attributes change
diff --git a/src/definitions/modules/dimmer.js b/src/definitions/modules/dimmer.js
index 49d29e7bc..54271a5a9 100644
--- a/src/definitions/modules/dimmer.js
+++ b/src/definitions/modules/dimmer.js
@@ -219,6 +219,7 @@ $.fn.dimmer = function(parameters) {
               $dimmer
                 .transition({
                   animation   : settings.transition + ' in',
+                  displayType : 'flex',
                   queue       : false,
                   duration    : module.get.duration(),
                   useFailSafe : true,
@@ -264,6 +265,7 @@ $.fn.dimmer = function(parameters) {
                 .transition({
                   animation   : settings.transition + ' out',
                   queue       : false,
+                  displayType : 'flex',
                   duration    : module.get.duration(),
                   useFailSafe : true,
                   onStart     : function() {
diff --git a/src/definitions/modules/dimmer.less b/src/definitions/modules/dimmer.less
index da436c1e2..539ea6a20 100755
--- a/src/definitions/modules/dimmer.less
+++ b/src/definitions/modules/dimmer.less
@@ -35,6 +35,13 @@
   width: 100%;
   height: 100%;
 
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+
   text-align: @textAlign;
   vertical-align: @verticalAlign;
 
@@ -51,20 +58,6 @@
   z-index: @zIndex;
 }
 
-/* Dimmer Content */
-.ui.dimmer > .content {
-  width: 100%;
-  height: 100%;
-  display: @contentDisplay;
-  user-select: text;
-}
-.ui.dimmer > .content > * {
-  display: @contentChildDisplay;
-  vertical-align: @verticalAlign;
-  color: @textColor;
-}
-
-
 /* Loose Coupling */
 .ui.segment > .ui.dimmer {
   border-radius: inherit !important;
@@ -82,7 +75,7 @@
 .dimmed.dimmable > .ui.animating.dimmer,
 .dimmed.dimmable > .ui.visible.dimmer,
 .ui.active.dimmer {
-  display: block;
+  display: flex !important;
   opacity: @visibleOpacity;
 }
 
diff --git a/src/definitions/modules/modal.js b/src/definitions/modules/modal.js
index 6bc0092c7..47299e23f 100644
--- a/src/definitions/modules/modal.js
+++ b/src/definitions/modules/modal.js
@@ -166,10 +166,6 @@ $.fn.modal = function(parameters) {
 
         refresh: function() {
           module.remove.scrolling();
-          module.cacheSizes();
-          module.set.screenHeight();
-          module.set.type();
-          module.set.position();
         },
 
         refreshModals: function() {
@@ -316,10 +312,6 @@ $.fn.modal = function(parameters) {
           if( module.is.animating() || !module.is.active() ) {
 
             module.showDimmer();
-            module.cacheSizes();
-            module.set.position();
-            module.set.screenHeight();
-            module.set.type();
             module.set.clickaway();
 
             if( !settings.allowMultiple && $otherModals.filter('.' + className.active).length > 0) {
@@ -411,7 +403,6 @@ $.fn.modal = function(parameters) {
             $dimmable.dimmer('hide', function() {
               if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
                 module.remove.clickaway();
-                module.remove.screenHeight();
               }
             });
           }
@@ -492,14 +483,6 @@ $.fn.modal = function(parameters) {
               ;
             }
           },
-          screenHeight: function() {
-            if(module.cache.height > module.cache.pageHeight) {
-              module.debug('Removing page height');
-              $body
-                .css('height', '')
-              ;
-            }
-          },
           keyboardShortcuts: function() {
             module.verbose('Removing keyboard shortcuts');
             $document
@@ -512,28 +495,6 @@ $.fn.modal = function(parameters) {
           }
         },
 
-        cacheSizes: function() {
-          var
-            modalHeight = $module.outerHeight()
-          ;
-          if(module.cache === undefined || modalHeight !== 0) {
-            module.cache = {
-              pageHeight    : $(document).outerHeight(),
-              height        : modalHeight + settings.offset,
-              contextHeight : (settings.context == 'body')
-                ? $(window).height()
-                : $dimmable.height()
-            };
-          }
-          module.debug('Caching modal and container sizes', module.cache);
-        },
-
-        can: {
-          fit: function() {
-            return ( ( module.cache.height + (settings.padding * 2) ) < module.cache.contextHeight);
-          }
-        },
-
         is: {
           active: function() {
             return $module.hasClass(className.active);
@@ -557,7 +518,7 @@ $.fn.modal = function(parameters) {
           autofocus: function() {
             if(settings.autofocus) {
               var
-                $inputs    = $module.find(':input:visible'),
+                $inputs    = $module.filter(':input').filter(':visible'),
                 $autofocus = $inputs.filter('[autofocus]'),
                 $input     = ($autofocus.length > 0)
                   ? $autofocus
@@ -573,17 +534,6 @@ $.fn.modal = function(parameters) {
               ;
             }
           },
-          screenHeight: function() {
-            if( module.can.fit() ) {
-              $body.css('height', '');
-            }
-            else {
-              module.debug('Modal is taller than page content, resizing page height');
-              $body
-                .css('height', module.cache.height + (settings.padding * 2) )
-              ;
-            }
-          },
           active: function() {
             $module.addClass(className.active);
           },
@@ -591,37 +541,6 @@ $.fn.modal = function(parameters) {
             $dimmable.addClass(className.scrolling);
             $module.addClass(className.scrolling);
           },
-          type: function() {
-            if(module.can.fit()) {
-              module.verbose('Modal fits on screen');
-              if(!module.othersActive()) {
-                module.remove.scrolling();
-              }
-            }
-            else {
-              module.verbose('Modal cannot fit on screen setting to scrolling');
-              module.set.scrolling();
-            }
-          },
-          position: function() {
-            module.verbose('Centering modal on page', module.cache);
-            if(module.can.fit()) {
-              $module
-                .css({
-                  top: '',
-                  marginTop: -(module.cache.height / 2)
-                })
-              ;
-            }
-            else {
-              $module
-                .css({
-                  marginTop : '',
-                  top       : $document.scrollTop()
-                })
-              ;
-            }
-          },
           undetached: function() {
             $dimmable.addClass(className.undetached);
           }
@@ -831,9 +750,7 @@ $.fn.modal.settings = {
   context    : 'body',
 
   queue      : false,
-  duration   : 500,
-  easing     : 'easeOutExpo',
-  offset     : 0,
+  duration   : 400,
   transition : 'scale',
 
   // padding with edge of page
diff --git a/src/definitions/modules/modal.less b/src/definitions/modules/modal.less
index 2d90053e7..eb4c0d133 100755
--- a/src/definitions/modules/modal.less
+++ b/src/definitions/modules/modal.less
@@ -25,12 +25,13 @@
 
 .ui.modal {
   display: none;
-  position: fixed;
-  z-index: @zIndex;
 
-  top: 50%;
-  left: 50%;
   text-align: left;
+  min-height: 0;
+  flex: 0 1 auto;
+
+  z-index: @zIndex;
+
 
   background: @background;
   border: @border;
@@ -38,7 +39,7 @@
 
   border-radius: @borderRadius;
   user-select: text;
-  will-change: top, left, margin, transform, opacity;
+  will-change: margin, transform, opacity;
 }
 
 .ui.modal > :first-child:not(.icon),
@@ -91,13 +92,16 @@
   padding: @headerPadding;
   box-shadow: @headerBoxShadow;
 
-  font-size: @headerFontSize;
   line-height: @headerLineHeight;
   font-weight: @headerFontWeight;
   color: @headerColor;
   border-bottom: @headerBorder;
 }
 
+.ui.modal > .header:not(.ui) {
+  font-size: @headerFontSize;
+}
+
 /*--------------
      Content
 ---------------*/
@@ -338,8 +342,6 @@
   overflow: hidden;
 }
 .scrolling.dimmable.dimmed > .dimmer {
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
 }
 .scrolling.dimmable > .dimmer {
   position: fixed;
@@ -349,25 +351,6 @@
   margin: @scrollingMargin auto !important;
 }
 
-/* undetached scrolling */
-.scrolling.undetached.dimmable.dimmed {
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-}
-.scrolling.undetached.dimmable.dimmed > .dimmer {
-  overflow: hidden;
-}
-.scrolling.undetached.dimmable .ui.scrolling.modal {
-  position: absolute;
-  left: 50%;
-  margin-top: @scrollingMargin !important;
-}
-
-/* Coupling with Sidebar */
-.undetached.dimmable.dimmed > .pusher {
-  z-index: auto;
-}
-
 @media only screen and (max-width : @computerBreakpoint) {
   .ui.scrolling.modal {
     margin-top: @mobileScrollingMargin;
diff --git a/src/definitions/modules/transition.js b/src/definitions/modules/transition.js
index 88bb5715c..cbcd10221 100644
--- a/src/definitions/modules/transition.js
+++ b/src/definitions/modules/transition.js
@@ -110,7 +110,7 @@ $.fn.transition = function() {
 
         refresh: function() {
           module.verbose('Refreshing display type on next animation');
-          delete module.displayType;
+          module.remove.displayType();
         },
 
         forceRepaint: function() {
@@ -136,7 +136,7 @@ $.fn.transition = function() {
 
         delay: function(interval) {
           var
-            isReverse = (settings.reverse === true),
+            isReverse     = (settings.reverse === true),
             shouldReverse = (settings.reverse == 'auto' && module.get.direction() == className.outward),
             delay
           ;
@@ -301,9 +301,11 @@ $.fn.transition = function() {
               displayType        = module.get.displayType(),
               overrideStyle      = style + 'display: ' + displayType + ' !important;'
             ;
-            $module.css('display', '');
-            module.refresh();
-            if( $module.css('display') !== displayType ) {
+            $module
+              .css('display', '')
+            ;
+            module.remove.displayType();
+            if( $module.css('display') !== displayType ) { // bad
               module.verbose('Setting inline visibility to', displayType);
               $module
                 .attr('style', overrideStyle)
@@ -333,13 +335,13 @@ $.fn.transition = function() {
             ;
           },
           hidden: function() {
-            if(!module.is.hidden()) {
+            if(!module.is.hidden()) { // bad
               $module
                 .addClass(className.transition)
                 .addClass(className.hidden)
               ;
             }
-            if($module.css('display') !== 'none') {
+            if($module.css('display') !== 'none') { // bad
               module.verbose('Overriding default display to hide element');
               $module
                 .css('display', 'none')
@@ -360,6 +362,11 @@ $.fn.transition = function() {
               $module.data(metadata.displayType, displayType);
             }
           },
+          direction: function(direction) {
+            if(direction) {
+              $module.data(metadata.direction, direction);
+            }
+          },
           transitionExists: function(animation, exists) {
             $.fn.transition.exists[animation] = exists;
             module.verbose('Saving existence of transition', animation, exists);
@@ -438,6 +445,9 @@ $.fn.transition = function() {
           display: function() {
             $module.css('display', '');
           },
+          displayType: function() {
+            delete module.displayType;
+          },
           direction: function() {
             $module
               .removeClass(className.inward)
@@ -516,18 +526,25 @@ $.fn.transition = function() {
           },
           direction: function(animation) {
             // quickest manually specified direction
+            var
+              direction
+            ;
             animation = animation || settings.animation;
             if(typeof animation === 'string') {
               animation = animation.split(' ');
               $.each(animation, function(index, word){
                 if(word === className.inward) {
-                  return className.inward;
+                  direction = className.inward;
                 }
                 else if(word === className.outward) {
-                  return className.outward;
+                  direction = className.outward;
                 }
               });
             }
+            // return found direction
+            if(direction) {
+              return direction;
+            }
             // slower backup
             if( !module.can.transition() ) {
               return 'static';
@@ -640,18 +657,7 @@ $.fn.transition = function() {
                 .addClass(className.inward)
                 .css('animationName')
               ;
-              displayType = $clone
-                .attr('class', elementClass)
-                .removeAttr('style')
-                .removeClass(className.hidden)
-                .removeClass(className.visible)
-                .show()
-                .css('display')
-              ;
-              module.verbose('Determining final display state', displayType);
-              module.save.displayType(displayType);
 
-              $clone.remove();
               if(currentAnimation != inAnimation) {
                 module.debug('Direction exists for animation', animation);
                 directionExists = true;
@@ -664,6 +670,19 @@ $.fn.transition = function() {
                 module.debug('Static animation found', animation, displayType);
                 directionExists = false;
               }
+
+              displayType = $clone
+                .attr('class', elementClass)
+                .removeAttr('style')
+                .removeClass(className.hidden)
+                .removeClass(className.visible)
+                .show()
+                .css('display')
+              ;
+              module.verbose('Determining final display state', displayType);
+              module.save.displayType(displayType);
+
+              $clone.remove();
               module.save.transitionExists(animation, directionExists);
             }
             return (transitionExists !== undefined)
diff --git a/src/themes/default/modules/modal.variables b/src/themes/default/modules/modal.variables
index 12027422b..69cd1c4c2 100644
--- a/src/themes/default/modules/modal.variables
+++ b/src/themes/default/modules/modal.variables
@@ -83,11 +83,11 @@
 @largeMonitorWidth: 900px;
 @widescreenMonitorWidth: 950px;
 
-@mobileMargin: 0em 0em 0em -(@mobileWidth / 2);
-@tabletMargin: 0em 0em 0em -(@tabletWidth / 2);
-@computerMargin: 0em 0em 0em -(@computerWidth / 2);
-@largeMonitorMargin: 0em 0em 0em -(@largeMonitorWidth / 2);
-@widescreenMonitorMargin: 0em 0em 0em -(@widescreenMonitorWidth / 2);
+@mobileMargin: 0em;
+@tabletMargin: 0em;
+@computerMargin: 0em;
+@largeMonitorMargin: 0em;
+@widescreenMonitorMargin: 0em;
 
 @fullScreenWidth: 95%;
 @fullScreenOffset: (100% - @fullScreenWidth) / 2;
@@ -130,11 +130,11 @@
 @smallLargeMonitorWidth: (@largeMonitorWidth * @smallRatio);
 @smallWidescreenMonitorWidth: (@widescreenMonitorWidth * @smallRatio);
 
-@smallMobileMargin: 0em 0em 0em -(@smallMobileWidth / 2);
-@smallTabletMargin: 0em 0em 0em -(@smallTabletWidth / 2);
-@smallComputerMargin: 0em 0em 0em -(@smallComputerWidth / 2);
-@smallLargeMonitorMargin: 0em 0em 0em -(@smallLargeMonitorWidth / 2);
-@smallWidescreenMonitorMargin: 0em 0em 0em -(@smallWidescreenMonitorWidth / 2);
+@smallMobileMargin: 0em;
+@smallTabletMargin: 0em;
+@smallComputerMargin: 0em;
+@smallLargeMonitorMargin: 0em;
+@smallWidescreenMonitorMargin: 0em;
 
 @largeHeaderSize: 1.6em;
 @largeMobileWidth: @mobileWidth;
@@ -143,8 +143,8 @@
 @largeLargeMonitorWidth: (@largeMonitorWidth * @largeRatio);
 @largeWidescreenMonitorWidth: (@widescreenMonitorWidth * @largeRatio);
 
-@largeMobileMargin: 0em 0em 0em -(@largeMobileWidth / 2);
-@largeTabletMargin: 0em 0em 0em -(@largeTabletWidth / 2);
-@largeComputerMargin: 0em 0em 0em -(@largeComputerWidth / 2);
-@largeLargeMonitorMargin: 0em 0em 0em -(@largeLargeMonitorWidth / 2);
-@largeWidescreenMonitorMargin: 0em 0em 0em -(@largeWidescreenMonitorWidth / 2);
\ No newline at end of file
+@largeMobileMargin: 0em;
+@largeTabletMargin: 0em;
+@largeComputerMargin: 0em;
+@largeLargeMonitorMargin: 0em;
+@largeWidescreenMonitorMargin: 0em;
\ No newline at end of file