title: Translate(Y) vertical center method not working - slightly off center
body: <p>I have this simple code to vertically and horizontally center a text element on a page:</p>
  
  <pre><code> body {
     max-width: 1200px;
     margin: 0 auto;
   }
  
   .container {
     position: relative;
     transform-style: preserve-3d;
     height: 100vh;
   }
  
   .center {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translateY(-50%);
   }
  </code></pre>
  
  <p>Doing this places the text in the in the vertical center of the container, but ever-so-slightly off-center to the right on the horizontal. I would think "left: 50%" would horizontally center it correctly, no?  </p>