title: CSS3 translate: using percent values
body: <p>I'm attempting to understand why in this codepen the two boxes aren't perfectly aligned.</p>
  
  <p><a href="https://codepen.io/mburke05/pen/BYXOGP" rel="nofollow noreferrer">https://codepen.io/mburke05/pen/BYXOGP</a></p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;div class="div_one"&gt;pixel&lt;/div&gt;
  &lt;div class="div_two"&gt;percent&lt;/div&gt;
  </code></pre>
  
  <p><strong>css</strong></p>
  
  <pre><code>.div_one {
    border: solid red;
    transform: translate(70px, 20%) ;
    width: 140px;
    height: 60px;
  }
  
  .div_two {
    border: solid blue;
    transform: translate(50%, 30%) ;
    width: 140px;
    height: 60px;
  }
  </code></pre>
  
  <p>I thought I understood that, when using %'s rather than pixel or other values, that the % value was based on the height of the element itself rather than the % of the parent (which in this case would be the viewport.) </p>
  
  <p>However, to achieve what I believe is alignment, I would need to set <code>translate(48%, 30%)</code> as the value. Why is this? Isn't 70 50% of 140, or is there more to it than I'm understanding.</p>
  
  <p>As a follow-up, can anybody explain why this is the preferred way of centering an object vertically mathematically?</p>