JavaScript获取元素高度返回undefined，无法实现元素居中怎么办？

问题原因分析 #

• 你在DOMContentLoaded回调中直接获取元素尺寸，此时元素可能未完成渲染，或父元素未设置正确的定位上下文，导致无法读取有效尺寸。
• 代码存在语法错误：middle函数中计算left时多了一个右括号，会导致函数执行失败。
• 获取objWidth时错误使用了clientHeight，应为clientWidth。
• 重复定义moveit变量，属于冗余代码。

修正后的代码 #

确保获取尺寸的时机正确，同时完善定位逻辑：

document.addEventListener('DOMContentLoaded', () => {
    function middle(){
        const title = document.getElementById("page-title");
        const moveit = document.getElementById("head-text");
        
        // 先确认元素存在，避免空值报错
        if (!title || !moveit) return;
        
        const titleHeight = title.clientHeight;
        const titleWidth = title.clientWidth;
        const objHeight = moveit.clientHeight;
        const objWidth = moveit.clientWidth;
        
        // 必须添加px单位，否则样式不生效
        moveit.style.top = `${titleHeight / 2 - objHeight / 2}px`;
        moveit.style.left = `${titleWidth / 2 - objWidth / 2}px`;
    }
    
    // 用window.onload确保所有资源加载完成后执行，避免尺寸读取异常
    window.onload = middle;
    // 监听窗口resize事件，窗口变化后重新居中
    window.addEventListener('resize', middle);
});

关键注意事项 #

• 定位上下文设置：父元素#page-title必须设置position: relative，目标元素#head-text设置position: absolute，否则top/left不会基于父元素生效。
• 尺寸读取时机：DOMContentLoaded仅保证DOM结构加载完成，若元素依赖外部CSS资源，用window.onload等待所有资源加载完成更稳妥。
• 单位必填：直接给style.top/style.left赋值数字无效，必须拼接px单位。

替代的JS居中方法 #

使用getBoundingClientRect()获取更精确的元素尺寸与位置：

function middle(){
    const title = document.getElementById("page-title");
    const moveit = document.getElementById("head-text");
    
    if (!title || !moveit) return;
    
    const titleRect = title.getBoundingClientRect();
    const moveitRect = moveit.getBoundingClientRect();
    
    const topOffset = (titleRect.height / 2) - (moveitRect.height / 2);
    const leftOffset = (titleRect.width / 2) - (moveitRect.width / 2);
    
    // 强制设置定位属性，避免依赖外部CSS
    title.style.position = 'relative';
    moveit.style.position = 'absolute';
    moveit.style.top = `${topOffset}px`;
    moveit.style.left = `${leftOffset}px`;
}

关于CSS居中无效的补充 #

你提到CSS居中没效果，大概率是定位属性未设置正确，这里提供一个通用的CSS居中方案，无需JS即可实现：

#page-title {
    position: relative;
    /* 给父元素设置固定高度，否则垂直居中效果不明显 */
    height: 200px;
    width: 100%;
}

#head-text {
    position: absolute;
    top: 50%;
    left: 50%;
    /* 基于自身尺寸偏移，实现完美居中 */
    transform: translate(-50%, -50%);
}

内容的提问来源于stack exchange，提问作者Forest Fire 7