Css 调整浏览器大小可移动我的按钮

我有一个背景图片，我试图把按钮放在中间底部的某个地方。但当我将浏览器移到屏幕的左侧或侧面时，按钮会稍微移动。但我想让它保持原样。有人能告诉我我做错了什么吗？ 下面是我的CSS

body
{
    margin:0;
    padding :0;
    background:url(ht.JPG);
    background-attachment: fixed;
    background-position: 50% 50%;
    background-size:cover;
    background-repeat: no-repeat;
    font-family:sans-serif;
}

#loginbutton 
{
    font-weight: bold;
    font-size:18px;
    opacity:0.6;
    align-items: center;
    text-align:center;
    border:none;
    height:100px;
    width:100px;
    border-radius: 50%;
    background:transparent;
    color:black;
    background-color:#EAEAEA;



    position: absolute;
    top:69%;
    left:45%;


}

下面是我在html上的按钮

<a href="register.html" ><button type="submit" value="Submit" id="loginbutton">Login</button></a>

---

我尝试将背景图像调整到窗口高度：

     [https://jsfiddle.net/n09sos3c/3/][1]

请注意，这并不能确保在非常小的窗口分辨率下，按钮仍然无法安装在正确的位置，因为图像会缩小，但按钮不会

---

您可以在此处了解背景速记：

但当我将浏览器移到屏幕左侧或侧面时，按钮会稍微移动。你的意思是调整大小吗？@VishnuKyatannawar是的，当我调整浏览器大小时就会发生这种情况。正确。>>如果您尝试修复背景图像，但仍在浏览器上调整大小，按钮会稍微移动，因为按钮不会像调整大小时的背景那样收缩。@Vishnukyatanawar您的代码修复了我的问题。非常感谢。快速提问，在没有重复之后有两个中心，每个中心做什么？