html - CSS3 变换 :translate produces inaccurate results

Question

我试图使用以下代码将 div 元素的右边缘定位到距页面中心 300 像素的位置:

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 的某些样式，我怀疑这是否会发生。