为何我的JS函数无法在onresize事件触发时执行？

哦，我一眼就看到问题所在啦！你给addEventListener传的事件名称写错了——应该用"resize"而不是"onresize"。"onresize"是旧的DOM0级事件绑定（比如直接写window.onresize = function() {}）的写法，和addEventListener的事件命名规则不兼容，所以你的函数根本没被正确绑定到resize事件上。

第一步：修正事件绑定 #

把你的事件监听代码改成这样：

window.addEventListener("resize", getCentralPosition);

另外，别忘了在页面初始加载时手动调用一次函数，确保标题一开始就是居中的：

// 页面所有资源加载完成后执行
window.addEventListener("load", getCentralPosition);
// 或者DOM结构加载完成就执行（更高效）
document.addEventListener("DOMContentLoaded", getCentralPosition);

第二步：优化性能（可选但推荐） #

resize事件会在窗口调整过程中频繁触发，短时间内可能调用几十次getCentralPosition，会造成不必要的性能损耗。你可以给函数加个防抖（debounce）逻辑，让它只在窗口停止调整后的一段时间内执行一次：

// 防抖工具函数
function debounce(func, delay = 100) {
  let timeoutId;
  return function() {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, arguments), delay);
  };
}

// 绑定防抖后的函数，减少触发频率
window.addEventListener("resize", debounce(getCentralPosition));
// 初始加载调用一次
document.addEventListener("DOMContentLoaded", getCentralPosition);

更优方案：用CSS实现垂直居中（无需JS） #

其实完全没必要用JS来做垂直居中，CSS的方案更简洁、高效，还能自动适配窗口变化。给你几种常用的实现方式：

方案1：Flexbox布局 #

给父容器（#home-section-1）添加以下CSS：

#home-section-1 {
  position: relative; /* 若父容器原本无定位需添加 */
  display: flex;
  align-items: center; /* 实现垂直居中 */
  justify-content: center; /* 可选：同时实现水平居中 */
  height: 100vh; /* 根据需求设置高度，比如占满视口 */
}

方案2：绝对定位 + Transform #

如果父容器是相对定位，子元素可以这样写：

#home-first-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 同时实现水平+垂直居中 */
}

方案3：Grid布局 #

父容器设置为grid：

#home-section-1 {
  display: grid;
  place-items: center; /* 一行代码实现水平+垂直居中 */
  height: 100vh;
}

这些CSS方案都是纯响应式的，窗口大小变化时会自动保持居中，不需要写任何JS代码，推荐优先使用！

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