title: Centre 2 line text in box
body: <p>I have 2 boxes with some text going across positioned in the centre of each box. The problem is when there is 2 lines of text the text doesn't get centred anymore.</p>
  
  <p><a href="http://codepen.io/anon/pen/waBozx" rel="nofollow"><strong>Here's an example</strong></a></p>
  
  <p>The positioning of the text is made by the following CSS as the boxes have a hover effect: </p>
  
  <pre><code>margin: 50% 0 0;
      -webkit-transition: -webkit-transform 0.35s;
      transition: transform 0.35s;
      -webkit-transform: translate3d(0,100%,0);
      transform: translate3d(0,100%,0);
  </code></pre>
  
  <p>Any ideas on how to have the text always centred even when there is 2 or more lines of text?</p>
  
  <p>Thank you! </p>