Translate(Y) vertical center method not working - slightly off center

Question

I have this simple code to vertically and horizontally center a text element on a page:

 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%);
 }

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?

Answer 1

Close, but you need to add translateX as well. Luckily, there's a nice shorthand for accomplishing both X and Y transform at the same time:

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

The reason it's slightly off-center is because left: 50% pushes the element so that it's left side is at 50% exactly. Adding the transformX(-50%) negates that extra space. See the snippet below:

.box-container {
  position: relative;
  height: 200px;
}

.center-box {
  position: absolute;
  background: black;
  width: 50px;
  height: 50px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="box-container">
  <div class="center-box"></div>
</div>