你可以這樣做：
const circle1 = document.querySelector('#c1');
const circle2 = document.querySelector('#c2');
const box = document.querySelector('.box');
const rect = box.getBoundingClientRect();
const topCenter = {
x: rect.x + rect.width/2,
y: rect.y,
}
const centerRight = {
x: rect.x + rect.width,
y: rect.y + rect.height/2,
}
const circleRadius = 5;
circle1.style.left = `${topCenter.x - circleRadius}px`;
circle1.style.top = `${topCenter.y - circleRadius}px`;
circle2.style.left = `${centerRight.x - circleRadius}px`;
circle2.style.top = `${centerRight.y - circleRadius}px`;
* {
padding: 0;
margin: 0;
}
body {
position: relative;
width: 100vw;
height: 100vh;
}
.box {
--height: 100px;
--width: 200px;
position: absolute;
left: calc((100% - var(--width)) / 2);
top: calc((100% - var(--height)) / 2);
width: var(--width);
height: var(--height);
border: 1px solid black;
}
.circle {
position: absolute;
border-radius: 50%;
background: red;
width: 10px;
height: 10px;
}
<div class="circle" id="c1"></div>
<div class="circle" id="c2"></div>
<div class="box"></div>
