Transform with translate Y not aligning vertically in the middle
<p>I'm trying to get a div to vertically align in the middle of a parent div. I'm using bootstrap for the layout. I have tried to put the following code at the container, row and col level of the HTML but with no luck.</p>

<pre><code>  .container { // or .row or .col 
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
</code></pre>

<p><a href="http://codepen.io/anon/pen/WwLOBY" rel="nofollow">Codepen</a></p>

<p>Not sure what I'm doing wrong. As you will see from the Codepen link above, instead of the desired div being vertically aligned in the middle of the section, it goes UP to go half above and half below the top of the "screen".  I've adjusted the % to 100% instead of -50% which brings it down the screen but that doesn't make sense or follow the code of other Codepens I have seen.</p>