jQuery实现点击按钮基于屏幕像素将元素居中于文本框中点

核心逻辑是通过getBoundingClientRect()获取元素实时的像素位置与尺寸，计算出文本框中点后减去圆形自身宽高的一半，确保圆心与文本框中点完全对齐，全程使用绝对定位像素值控制位置，未使用flex等嵌套布局方案，每次点击都会重新计算适配当前窗口尺寸，天然支持响应式。

完整代码 #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
<div id="circle"></div>
<button>Click me</button>

CSS #

#text {
  background-color: lightgray;
  width: 40%;
}
#circle {
  width: 20vw;
  height: 20vw;
  background-color: red;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none; /* 可选，避免圆形遮挡页面交互 */
}
button {
  margin-top: 20px;
}

JS #

$("button").click(function() {
  // 获取文本框当前的视口位置与尺寸（像素单位）
  const textRect = $('#text')[0].getBoundingClientRect();
  // 计算文本框中点坐标
  const textCenterX = textRect.left + textRect.width / 2;
  const textCenterY = textRect.top + textRect.height / 2;
  
  // 获取圆形当前的尺寸
  const circleWidth = $('#circle').outerWidth();
  const circleHeight = $('#circle').outerHeight();
  // 计算圆形的定位值：中点坐标减去自身宽高一半，确保圆心对齐文本框中点
  const circleLeft = textCenterX - circleWidth / 2;
  const circleTop = textCenterY - circleHeight / 2;
  
  // 直接赋值像素值定位
  $('#circle').css({
    left: `${circleLeft}px`,
    top: `${circleTop}px`
  });
});

逻辑说明 #

• 所有定位都基于getBoundingClientRect()返回的真实视口像素值，未使用flex、grid等嵌套布局方案，完全符合要求
• 每次点击按钮都会重新计算当前元素的尺寸位置，窗口缩放、文本框内容变化后点击仍能正确对齐，支持响应式适配
• 规避了原代码同时设置left和right的错误，仅通过left、top两个属性控制圆形位置，逻辑更清晰

内容的提问来源于stack exchange，提问作者Anna_B