diff --git a/docs/src/pages/ui-elements/Layout.vue b/docs/src/pages/ui-elements/Layout.vue
index 917a168..e089014 100644
--- a/docs/src/pages/ui-elements/Layout.vue
+++ b/docs/src/pages/ui-elements/Layout.vue
@@ -144,6 +144,18 @@
                 <md-table-cell><code>Number</code></md-table-cell>
                 <md-table-cell>Apply an alignment to the container on screen sizes less than or equal to given breakpoint. Example: <code>md-align-xlarge="center"</code></md-table-cell>
               </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>md-vertical-align</md-table-cell>
+                <md-table-cell><code>String</code></md-table-cell>
+                <md-table-cell>Apply an vertical alignment to the container. Accepts <code>start</code>|<code>center</code>|<code>end</code>|<code>stretch</code> Example: <code>md-vertical-align="end"</code></md-table-cell>
+              </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>md-vertical-align-{type}</md-table-cell>
+                <md-table-cell><code>Number</code></md-table-cell>
+                <md-table-cell>Apply an vertical alignment to the container on screen sizes less than or equal to given breakpoint. Example: <code>md-vertical-align-xlarge="center"</code></md-table-cell>
+              </md-table-row>
             </md-table-body>
           </md-table>
         </api-table>
@@ -383,6 +395,33 @@
                 <span>center</span>
               </md-layout>
             </md-layout>
+
+            <md-layout>
+              <md-layout md-vertical-align="center" md-gutter="16" class="color" :style="{ height: '100px' }">
+                <md-layout>
+                  <span>vertical center</span>
+                </md-layout>
+              </md-layout>
+
+              <md-layout md-vertical-align="start" md-gutter="16" class="color" :style="{ height: '100px' }">
+                <md-layout>
+                  <span>vertical start</span>
+                </md-layout>
+              </md-layout>
+
+              <md-layout md-vertical-align="end" md-gutter="16" class="color" :style="{ height: '100px' }">
+                <md-layout>
+                  <span>vertical end</span>
+                </md-layout>
+              </md-layout>
+
+              <md-layout md-vertical-align="stretch" md-gutter="16" class="color" :style="{ height: '100px' }">
+                <md-layout>
+                  <span>vertical stretch (default)</span>
+                </md-layout>
+              </md-layout>
+            </md-layout>
+
           </div>
 
           <div slot="code">
diff --git a/src/components/mdLayout/mdLayout.scss b/src/components/mdLayout/mdLayout.scss
index b74c559..693b7ff 100644
--- a/src/components/mdLayout/mdLayout.scss
+++ b/src/components/mdLayout/mdLayout.scss
@@ -71,6 +71,41 @@
 @include layout-align();
 
 
+/* Vertical Alignments */
+
+@mixin layout-vertical-align($size: null) {
+  @if $size == null {
+    $size : '';
+  }
+
+  @if $size != '' {
+    $size : '-#{$size}';
+  }
+
+  .md-vertical-align#{$size}-start {
+    align-items: flex-start;
+    align-content: flex-start;
+  }
+
+  .md-vertical-align#{$size}-center {
+    align-items: center;
+    align-content: center;
+  }
+
+  .md-vertical-align#{$size}-end {
+    align-items: flex-end;
+    align-content: flex-end;
+  }
+
+  .md-vertical-align#{$size}-stretch {
+    align-items: stretch;
+    align-content: stretch;
+  }
+}
+
+@include layout-vertical-align();
+
+
 /* Gutter Size */
 
 @mixin layout-gutter($margin: -12px, $padding: 12px) {
diff --git a/src/components/mdLayout/mdLayout.vue b/src/components/mdLayout/mdLayout.vue
index 1d1be14..9c9f022 100644
--- a/src/components/mdLayout/mdLayout.vue
+++ b/src/components/mdLayout/mdLayout.vue
@@ -37,6 +37,12 @@
       mdAlignMedium: String,
       mdAlignLarge: String,
       mdAlignXlarge: String,
+      mdVerticalAlign: String,
+      mdVerticalAlignXsmall: String,
+      mdVerticalAlignSmall: String,
+      mdVerticalAlignMedium: String,
+      mdVerticalAlignLarge: String,
+      mdVerticalAlignXlarge: String,
       mdFlex: [String, Number, Boolean],
       mdFlexXsmall: [String, Number, Boolean],
       mdFlexSmall: [String, Number, Boolean],
@@ -101,7 +107,7 @@
         this.generatePropClasses('md-flex-offset', 'large', 'mdFlexOffsetLarge', classes);
         this.generatePropClasses('md-flex-offset', 'xlarge', 'mdFlexOffsetXlarge', classes);
 
-        /* Alignment */
+        /* Horizontal Alignment */
         this.generatePropClasses('md-align', '', 'mdAlign', classes);
         this.generatePropClasses('md-align', 'xsmall', 'mdAlignXsmall', classes);
         this.generatePropClasses('md-align', 'small', 'mdAlignSmall', classes);
@@ -109,6 +115,14 @@
         this.generatePropClasses('md-align', 'large', 'mdAlignLarge', classes);
         this.generatePropClasses('md-align', 'xlarge', 'mdAlignXlarge', classes);
 
+        /* Vertical Alignment */
+        this.generatePropClasses('md-vertical-align', '', 'mdVerticalAlign', classes);
+        this.generatePropClasses('md-vertical-align', 'xsmall', 'mdVerticalAlignXsmall', classes);
+        this.generatePropClasses('md-vertical-align', 'small', 'mdVerticalAlignSmall', classes);
+        this.generatePropClasses('md-vertical-align', 'medium', 'mdVerticalAlignMedium', classes);
+        this.generatePropClasses('md-vertical-align', 'large', 'mdVerticalAlignLarge', classes);
+        this.generatePropClasses('md-vertical-align', 'xlarge', 'mdVerticalAlignXlarge', classes);
+
         return classes;
       }
     },