屏幕中线Rectangle垂直居中失效及X位置调整异常问题求助

嘿，我来帮你解决这两个新手常见的小问题，一步步拆解：

问题1：矩形Y轴无法与水平线居中 #

你原来用top:50%只能把矩形的顶部对齐中线，没法让中心对齐——毕竟矩形有高度，固定margin又没法适配高度变化。这里有个万能的CSS技巧，用transform就能完美解决：

修改.rectangle的CSS样式：

.rectangle {
  position:absolute;
  top: 50%;
  left: 80%;
  width: 200px;
  height: 100px;
  background: red;
  /* 新增这行，实现Y轴自适应居中 */
  transform: translateY(-50%);
}

原理很简单：top:50%把矩形顶部放到屏幕垂直中点，translateY(-50%)让矩形向上偏移自身高度的一半，不管之后怎么改高度，中心都会死死贴住水平线。另外原来的margin: 0 auto在绝对定位下没用，可以直接删掉。

问题2：changeRec()方法位置异常 #

你的函数里有几个关键错误，我帮你修正并解释：

1. 不该把position改成relative，这会直接破坏绝对定位的布局，删掉这行；
2. 用window.screen.availWidth（屏幕总宽度）不对，我们需要的是当前页面的可视区域宽度，应该用window.innerWidth；
3. 没做“位移至少30px”的校验，也没严格限制X的范围。

修改后的changeRec()函数：

function changeRec() {
  const rect = document.getElementById("rectangle");
  const elementStyle = rect.style;
  // 获取当前矩形的实际X位置（兼容初始的百分比设置）
  const currentX = parseInt(elementStyle.left) || rect.getBoundingClientRect().left;
  const rectWidth = rect.clientWidth;
  // 计算X的最大允许值（保证矩形完全在屏幕内）
  const maxX = window.innerWidth - rectWidth;
  let newX;

  // 循环生成新位置，直到满足两个条件：在屏幕内、与当前位置位移≥30px
  do {
    newX = Math.floor(Math.random() * (maxX + 1)); // 生成0到maxX之间的随机整数
  } while (Math.abs(newX - currentX) < 30);

  // 设置新的X位置
  elementStyle.left = `${newX}px`;
}

完整修正代码 #

把所有修改整合后的完整代码如下：

<html>
<head>
  <title>B1</title>
  <style type="text/css">
    .line {
      position:absolute;
      top:50%;
      width:100%;
      height:1px;
      background:black;
    }
    .rectangle {
      position:absolute;
      top: 50%;
      left: 80%;
      width: 200px;
      height: 100px;
      background: red;
      transform: translateY(-50%);
    }
  </style>
</head>
<body>
  <script type="text/javascript">
    function changeRec() {
      const rect = document.getElementById("rectangle");
      const elementStyle = rect.style;
      const currentX = parseInt(elementStyle.left) || rect.getBoundingClientRect().left;
      const rectWidth = rect.clientWidth;
      const maxX = window.innerWidth - rectWidth;
      let newX;

      do {
        newX = Math.floor(Math.random() * (maxX + 1));
      } while (Math.abs(newX - currentX) < 30);

      elementStyle.left = `${newX}px`;
    }

    document.onkeydown = onKey;
    function onKey(e) {
      e = e || window.event;
      const keyCode = e.which || e.charCode || e.keyCode;
      switch (keyCode) {
        case 32: // 空格键触发
          changeRec();
          break;
        // 可以在这里继续添加其他按键的逻辑
      }
    }
  </script>
  <hr class="line">
  <div class="rectangle" id="rectangle"></div>
</body>
</html>

现在测试一下：

• 矩形会始终精准对齐水平线，哪怕你修改height属性也不用调整；
• 按空格键后，矩形会随机移动到一个新位置，保证完全在屏幕内，且和之前的位置至少差30px。

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