SCSS: Vertical align methods. Line height, Transform, Ghost pseudo, Auto margins, Negative margins

untitled.scss

/**
 * Line Height method.
 * Works with any single line (text / images)
 */
.parent {
  line-height: 5rem;
  // For images
  .img {
    vertical-align: middle;
  }
}

/**
 * Transforms.
 * Variable Height allowed
 */
.child {
  position: absolute;
  width: 50%;
  top: 25%;
  // main thing with this here is 'left'. Calculation of left is given by (100% - width) / 2
  left: 25%;
  @include transform(translateX(-50%) translateY(-50%));
}

/**
 * Ghost Pseudo
 * http://css-tricks.com/centering-in-the-unknown/
 */

// This parent can be any width and height
.block {
  text-align: center;
  // The ghost, nudged to maintain perfect centering
  :before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    // Adjusts for spacing Note: This is required
    margin-right: -0.25em;
  }
}

// The element to be centered, can also be of any width and height
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

/**
 * Position Absolute + Auto Margins
 * Requires fixed height
 */
.absolute-center {
  height: 20rem;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

/**
 * Position Absolute + Negative Margins
 * Requires fixed height and width
 */
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  // Requires known height and width
  width: 50%;
  height: 30%;
  // Negative margins = width/2 and height/2
  margin: -15% 0 0 -25%;
}

/**
 * Equal Paddings for Top and Bottom Elements.
 * ??? Not too familiar
 */
.parent {
  padding: 5% 0;
}

.child {
  padding: 10% 0;
}