Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="parent">
  <div class="children child1">
    I'm vertically centered!
    <br>- Fixed height in pixels (100px)
  </div>
</div>

<div class="parent">
  <div class="children child2">
      I'm vertically centered!
      <br>- auto height
  </div>
</div>

<div class="parent">
  <div class="children child3">
    I'm vertically centered!
    <br>- Fixed height larger than parent (300px)
  </div>
</div>

<div class="parent">
  <div class="children child4">
    I'm vertically centered!
    <br>- Height in percentage (50%)
  </div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.19)
// ----

// From: http://davidwalsh.name/css-vertical-center

@import "compass";

.parent {
  width: 250px;
  height: 250px;
  margin: 20px;
  border: 1px solid hotpink;
  display: inline-block;
}

.children{
	background: #ffdb4c;
	position: relative;
	top: 50%;
	@include translateY(-50%);
}

.child1 {
  height: 100px;
}

.child2 {
  height: auto;
}

.child3 {
  height: 300px;
}

.child4 {
  height: 50%;
}

SassMeister-output.css

.parent {
  width: 250px;
  height: 250px;
  margin: 20px;
  border: 1px solid hotpink;
  display: inline-block;
}

.children {
  background: #ffdb4c;
  position: relative;
  top: 50%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.child1 {
  height: 100px;
}

.child2 {
  height: auto;
}

.child3 {
  height: 300px;
}

.child4 {
  height: 50%;
}

SassMeister-rendered.html

<div class="parent">
  <div class="children child1">
    I'm vertically centered!
    <br>- Fixed height in pixels (100px)
  </div>
</div>

<div class="parent">
  <div class="children child2">
      I'm vertically centered!
      <br>- auto height
  </div>
</div>

<div class="parent">
  <div class="children child3">
    I'm vertically centered!
    <br>- Fixed height larger than parent (300px)
  </div>
</div>

<div class="parent">
  <div class="children child4">
    I'm vertically centered!
    <br>- Height in percentage (50%)
  </div>
</div>