Vertical alignement

_vertical-align.scss

// ----
// libsass (v3.2.2)
// ----

/* # @mixin vertical-align

@mixin vertical-align
@param $axis (x,y, both !default)
@param $position (absolute, relative !default)
@see - <http://caniuse.com/#feat=transforms2d>
@see - <http://stackoverflow.com/questions/23240114/how-to-vertically-center-a-div-with-sass-compass>

Compatibility IE9+ due to css3 transform

Styleguide libs.mixins.vertical-align
*/
@mixin vertical-align($axis: both,$position: relative){
  position: $position;
  @if $axis==y{
      top: 50%;
      transform: translateY(-50%);
  }
  @if $axis==x{
      left: 50%;
      transform: translateX(-50%);
  }
  @if $axis==both{
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
  }
}

//-----------------------------------------------------*/

.wrapz {
  background: red;
  color: #FFF;
  font-family: Helvetica, Arial, sans-serif;
  height: 100%;
  width: 100%;
  //@include vertical-align; // without argument : both|relative
}

.parent{
  background: lightblue;
  padding: 1%;
  height:400px;
  width: 350px;
  display:block;
  float:left;
  margin-right:10px;
  @include vertical-align(y);
  a{
    display:block;
    height:75%;
    @include vertical-align;
  }
}

a>.children{
  background: lightgreen;
  display: block;
  @include vertical-align;
}

vertical-align-HTML.html

<div style="height:450px;position:relative;width:100%;">
  <div class="wrapz">
      <div class="parent">
        <a href="#">
          <img class="children" src="http://placehold.it/350x150" width="300" height="200"/>
        </a>
      </div>
      <div class="parent">
        <a href="#">
          <img class="children" src="http://placehold.it/350x150" width="300" height="150"/>
        </a>
      </div>
  </div>
</div>

vertical-align-output.css

/* # @mixin vertical-align

@mixin vertical-align
@param $axis (x,y, both !default)
@param $position (absolute, relative !default)
@see - <http://caniuse.com/#feat=transforms2d>
@see - <http://stackoverflow.com/questions/23240114/how-to-vertically-center-a-div-with-sass-compass>

Compatibility IE9+ due to css3 transform

Styleguide libs.mixins.vertical-align
*/
.wrapz {
  background: red;
  color: #FFF;
  font-family: Helvetica, Arial, sans-serif;
  height: 100%;
  width: 100%;
}

.parent {
  background: lightblue;
  padding: 1%;
  height: 400px;
  width: 350px;
  display: block;
  float: left;
  margin-right: 10px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.parent a {
  display: block;
  height: 75%;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

a > .children {
  background: lightgreen;
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}