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

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>

Answer 2

If you can use flexbox then I would recommend using it. It makes this very simple:
body {
margin: 0;
}
.container {
height: 400px; /* Just for the snippet */
width: 400px; /* Just for the snippet */
background-color: #f4f4f4; /* Just for the snippet */
margin: 0 auto; /* Just for the snippet */
display: flex;
align-items: center;
justify-content: center;
}
<div class="container">
<div class="center">
This is centered
</div>
</div>
You can find about flexbox browser support from here: http://caniuse.com/#search=flex