点击.btn-menu按钮时汉堡菜单线条无法居中，求前端解决方案

问题描述 #

点击.btn-menu按钮切换汉堡菜单为叉形样式时，线条无法居中对齐。原代码如下：

原HTML代码 #

<div class="btn-menu" role="button">
    <div class="toggle-line is-top"></div>
    <div class="toggle-line is-bottom"></div>
</div>

原CSS代码 #

.btn-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 0.8rem;
    transition: all 0.6s;
}

.toggle-line {
    width: 5rem;
    height: 1rem;
    background-color: black;
    border-radius: 3px;
}

.is-top,
.is-bottom {
    transition: all 0.5s;
}

.transform .is-top {
    transform: translateY(8px) rotate(45deg);
}

.transform .is-bottom {
    transform: translateY(-8px) rotate(-45deg);
}

原JavaScript代码 #

const menuBtn = document.querySelector(".btn-menu");

// Create menu animation
menuBtn.addEventListener("click", function () {
    menuBtn.classList.toggle("transform"); 
});

错误原因分析 #

1. 单位不匹配：gap使用rem单位，而translateY用px，导致移动距离和线条间距不对应，无法精准交汇在中心
2. 移动距离计算错误：两条线的间距是0.8rem，要让它们在中心交汇，每条线需要移动的距离应为间距的一半（0.4rem），而非固定的8px
3. 未明确设置变换原点：虽然默认变换原点是元素中心，但明确声明transform-origin能避免不同浏览器的潜在渲染差异

修正后的代码 #

仅需调整CSS部分，JavaScript和HTML保持不变：

.btn-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 0.8rem;
    transition: all 0.6s;
}

.toggle-line {
    width: 5rem;
    height: 1rem;
    background-color: black;
    border-radius: 3px;
    /* 明确设置变换原点为元素中心 */
    transform-origin: center;
}

.is-top,
.is-bottom {
    transition: all 0.5s;
}

.transform .is-top {
    /* 移动距离改为间距的一半，单位统一用rem */
    transform: translateY(0.4rem) rotate(45deg);
}

.transform .is-bottom {
    /* 移动距离改为间距的一半，单位统一用rem */
    transform: translateY(-0.4rem) rotate(-45deg);
}

说明 #

修正后，两条线会精准移动到中心位置并旋转，形成居中的叉形样式。统一使用rem单位保证了在不同字体大小下的适配性，明确transform-origin让旋转行为更可控。

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