Using CSS3 to vertical align only 1 child element inside another element with a fallback

vertical-align-flex.scss

@mixin simpleFlex ($align, $child) {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; 

  -webkit-box-align:$align;

  -webkit-flex-align: $align;
  -moz-flex-align: $align;
  -ms-flex-align: $align;
  flex-align:$align;
  
  -webkit-align-items: $align;
  -moz-align-items: $align;
  -ms-align-items: $align;
  align-items: $align;

  #{$child} {
    -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;         /* OLD - Firefox 19- */
    -webkit-flex: 1;          /* Chrome */
    -ms-flex: 1;              /* IE 10 */
    flex: 1;  
  }
}

/*
Sample HTML
  <div class="flex-container">
    <div class="flex-child">
      <p> Some content </p>
    </div>
  </div>
  
  We just want to vertical align the "flex-child" inside of the "flex-container"
*/

.flex-container {
  height: 100px;  //needs some height set
  @include simpleFlex(center, '.flex-child');
}

// Fallback
// using HTML classes to target IE

.ie9 {
  .flex-container {
    display:block;
    .flex-child {
      display:block;
    }
  }
}