如果我單擊& quot點擊& quot按鈕，箭頭應該移動到接觸圓，并改變圓的顏色。

這里我要把圓對齊左邊和中心，箭頭應該在右邊和中心。

section {
  border: 3px solid black;
  height: 60vh;
  width: 90vh;
  margin: auto;
}

h1 {
  text-align: center;
}

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: red;
  position: relative;
  display: flex;
  align-items: center;
}

.icon-arrow {
  width: 90px;
  height: 3px;
  background-color: black;
  border-radius: 2px;
  position: relative;
  top: 49px;
  float: right;
}

.icon-arrow:after {
  content: '';
  display: inline-block;
  width: 30px;
  height: 2px;
  background-color: black;
  transform: rotate(45deg);
  position: absolute;
  left: -5px;
  top: 11px;
}

.icon-arrow:before {
  content: '';
  display: inline-block;
  width: 30px;
  height: 2px;
  background-color: black;
  transform: rotate(-45deg);
  position: absolute;
  right: 65px;
  bottom: 9px;
}

<h1>Bubble App</h1>

<section>
  <div class="container">

    <div class="circle"></div>
    <div class="icon-arrow" style="display: flex; align-items: center; "></div>


  </div>

</section>

<div class="button">
  <button onclick="hit()">Hit</button>
  <button onclick="reset()">Reset</button><br>
</div>

這是你想要的嗎？我沒有完全理解你的問題，所以如果你需要更多的幫助，請告訴我。

我將display flex添加到該部分，因為您希望根據帶有邊框的元素將元素居中?，F在，圓和箭頭位于邊框的中心。

.container{
border: 3px solid black;
height: 60vh; 
width: 90vh;   
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
}

h1{
    text-align: center;
}

.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: red;
}

.icon-arrow{
    width: 90px;
    height: 3px;
    background-color: black;
    border-radius: 2px;
    position: relative;
}

.icon-arrow:after{
    content: '';
    display: inline-block;
    width: 30px;
    height: 2px;
    background-color: black;
    transform: rotate(45deg);
    position: absolute;
    left: -5px;
    top: 11px;
}

.icon-arrow:before{
    content: '';
    display: inline-block;
    width: 30px;
    height: 2px;
    background-color: black;
    transform: rotate(-45deg);
    position: absolute;
    right: 65px;
    bottom: 9px;
}

<h1>Bubble App</h1>

<section class="container">
  <div class="circle" ></div>
  <div class="icon-arrow"></div>
</section>

<div class="button">
  <button onclick="hit()">Hit</button>
  <button onclick="reset()">Reset</button><br>
</div>

我希望這能幫助你，我想你是在問這件事，如果我理解錯了，請告訴我。再詳細問一下這個問題。

.container{
border: 3px solid black;
height: 60vh; 
width: 90vh;   
margin: auto;
display: flex;
justify-content: center;
align-items: center;
}

h1{
    text-align: center;
}

.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: red;
}

.icon-arrow{
    width: 90px;
    height: 3px;
    background-color: black;
    border-radius: 2px;
    position: relative;
}

.icon-arrow:after{
    content: '';
    display: inline-block;
    width: 30px;
    height: 2px;
    background-color: black;
    transform: rotate(45deg);
    position: absolute;
    left: -5px;
    top: 11px;
}

.icon-arrow:before{
    content: '';
    display: inline-block;
    width: 30px;
    height: 2px;
    background-color: black;
    transform: rotate(-45deg);
    position: absolute;
    right: 65px;
    bottom: 9px;
}

.button {
    text-align: right;
}

<h1>Bubble App</h1>

<section class="container">
  <div class="circle" ></div>
  <div class="icon-arrow"></div>
</section>

<div class="button">
  <button onclick="hit()">Hit</button>
  <button onclick="reset()">Reset</button><br>
</div>