title: Transform: translate(-50%, -50%)
body: <p>When working with hero images or full screen anything, I typically see text or images with the following bit of css:</p>
  
  <pre><code>.item {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
  }
  </code></pre>
  
  <p>Can someone explain to me what this code is actually doing?</p>