爲什麼我的div在移動時不能與其他div保持同步？

Question

我想獲得藍色的「盾」div來覆蓋紅色的「按鈕」div點擊3次後，但它沒有正確覆蓋它...這是要麼左太右等我不知道如何解決它。我試過調整randomplace變量，但似乎並沒有工作。誰能幫忙？

<div id="shield"></div> 
<div id="button" onclick="buttonmes()"> 
    <div id="message"></div> 
</div> 
<style> 
    #button {height:200px; width:200px; background-color:red;position:absolute;top:50%;left:50%;border-radius:50%;} 
    #button:active{transform:scale(0.9,0.9);} 
    #message{position:relative;top:50%;left:35%;} 
    #shield{height:200px;width:200px;background-color:blue;visibility:hidden;position:absolute;top:50%;left:50%;} 
</style> 
<script> 
    var clicknum = 0; 
    var showme = document.getElementById("shield"); 
    function randomloc() { 
     var randomlyPlace = function(el){ 
      el.style.position = "absolute"; 
      el.style.top = Math.floor(Math.random()*document.body.clientHeight); 
      el.style.left = Math.floor(Math.random()*document.body.clientWidth); 
     }; 

     randomlyPlace(document.getElementById('shield')); 
     randomlyPlace(document.getElementById('button')); 

    } 
    function buttonmes() { 
     if (clicknum === 0) { 
      document.getElementById("message").innerHTML = "Hey stop it!"; 
      clicknum++; 
      randomloc(); 
     } 
     else if (clicknum === 1) { 
      document.getElementById("message").innerHTML = "I said stop!"; 
      clicknum++; 
      randomloc(); 

     } 
     else if (clicknum === 2){ 

      document.getElementById("message").innerHTML = "Ha! Now you can't get me!"; 
      showme.style.visibility = "visible"; 
      clicknum++ 
     } 
     else if (clicknum === 3) { 
      showme.style.visibility = "hidden"; 
      document.getElementById("message").innerHTML = "How did you get me!?!"; 
      clicknum++; 
     } 
    } 
</script> 

Answer 1

添加以下到屏蔽風格：

transform: translate(-50%, -50%); 

你有你在哪裏對準圖像頂部左上方的問題：50％，左：50％，但你真的想要將圖像的中心對齊到頂部：50％，剩下：50％。

來源：https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/