title: Element centered with translate(-50%, -50%) - transition not working
body: <p>I have a div:</p>
  
  <pre><code>&lt;div class="element"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>which is centered on screen using these css properties:</p>
  
  <pre><code>.element {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }
  </code></pre>
  
  <p>Now I want this div to change its height after adding a class </p>
  
  <pre><code>.bigger {
      height: 80%;
  }
  </code></pre>
  
  <p>but I want it to animate, so I added a transition property:</p>
  
  <pre><code>.element {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transition: height .4s ease-in-out;
  }
  </code></pre>
  
  <p>however height isn't animated after adding 'bigger' class. How to get it working?
  Note that I actually use SASS and Jeet grid system to center this div (using @include align(b)).
  Here is working CodePen - <a href="http://codepen.io/mbrnwsk/pen/zGxOyN" rel="nofollow">codepen</a></p>