macx
1/24/2014 - 1:49 PM

Vertical aligned elements. Source: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Vertical aligned elements. Source: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

is-vertical-aligned.html
content_copyfile_download
<div class="box">
  <div class="box__inner is-vertical-aligned">
    VERTICAL ALIGNED
  </div>
</div>
style.scss
content_copyfile_download
@import "compass";
@import "compass/css3";

// the magic
%is-vertical-aligned {
  @include transform(translateY(-50%));
  
  position: relative;
  top: 50%;
}

body {
  font-family: Helvetica, Arial;
  background-color: #f5f5f5;
}

.box {
  box-shadow: 0 1px 5px rgba(#000, 0.2);
  margin: 30px auto;
  width: 200px;
  height: 200px;
  padding: 10px;
  background-color: #fff;
  
  .box__inner {
    @extend %is-vertical-aligned;
    
    background-color: #d00;
    color: #fff;
    padding: 10px;
  }
}