title: CSS: How to center texts with transitioning position?
body: <p>I created 2 inner spans to hold the current and additional contents to be shown on button hover, the transition between initial and hover states works fine, but I have no idea how to center texts both vertically and horizontally?!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.btn {
    background: #C5D200;
    color: #fff;
    width: 150px;
    height: 30px;
    padding: 10px 20px;
    border-radius: 20px;
    display: block;
   position: relative;
   overflow: hidden;
   text-align: center;
  }
  
  .content {
   position: absolute;
   transition: top .4s;
  }
  
  .top { top: 0; }
  
  .btn:hover .top { top: -50px; }
  
  .bottom { top: 50px; }
  
  .btn:hover .bottom { top: 0; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;a href="#" class="btn"&gt;
      &lt;span class="top content"&gt;Buy Now&lt;/span&gt;
      &lt;span class="bottom content"&gt; On Sale $1&lt;/span&gt;
    &lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>