CSS3转换：translate产生不准确的结果

Question

我试图使用以下代码从页面中心定位div元素300px的右边缘：

HTML：

<div id="content">
   <div id="login">
       <!-- login area -->
   </div>
</div>

CSS：

#content {
    width: 100%;
    position: relative;
    top: 0px;
}

div#login {
    position: absolute;
    text-align: right;
    right: 50%;
    transform: translate(300px, 0px);
}

然而，奇怪的是，这会导致div向右移动374px。

有什么我忘了想的吗？ 或者有更好的方法来达到相同的结果吗？

Answer 1

另一种不使用transform -

的解决方案

使用right: calc(50% - 300px);

首先查看此JSFiddle

现在查看此fiddle

不要忘记扩大jsfiddle结果窗口以正确查看结果

希望这可以按照你的意愿运作。如果这不起作用，请随意分享，同时检查另一个CSS是否覆盖了div的某些样式，我怀疑这种情况正在发生。

Answer 2

嗯，事实证明，问题不是CSS，而是Windows 10设置。在GIMP中测量屏幕截图时要小心，同时将一般显示大小设置为125％......

之后，所有解决方案都运行良好，谢谢！