CSS vertical centering

css

.parent {
  float: left;
  height: 200px;
  width: 200px;
  background: gray;
  margin: 0 10px 0 0;
}
.children {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
.child_1 {
  height: 30px;
  background: red;
}
.child_2 {
  height: 80px;
  background: blue;
}

html

<div class="parent">
  <div class="children child_1"></div>
</div>
<div class="parent">
  <div class="children child_2"></div>
</div>

http://codepen.io/anon/pen/bJlDy