汉堡菜单切换为关闭按钮（X）后显示不均问题求助

嘿，我帮你排查了这个汉堡菜单切换为X按钮时的显示问题，核心是按钮容器的尺寸控制和X线条的变换原点没配合好，导致右侧截断、左右不均。咱们用这几个步骤就能轻松搞定：

1. 给按钮容器设置对称的固定尺寸 #

汉堡和X按钮状态下，容器的宽度、高度、内边距必须统一，避免切换时布局跳动。比如给按钮添加固定尺寸和对称内边距：

.burger-btn {
  width: 40px;
  height: 40px;
  padding: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  /* 保留你原有其他样式，比如display: flex之类的 */
}

2. 让汉堡线条水平居中，保证初始布局对称 #

用flex布局让三条汉堡线条在容器内水平居中，这样切换成X时，旋转的起点才会在中心：

.burger-lines {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  align-items: center; /* 关键：让线条水平居中 */
}

.burger-line {
  width: 100%; /* 用容器宽度，保证三条线长度一致 */
  height: 2px;
  background-color: #333;
  transition: all 0.3s ease;
}

3. 给X线条设置中心变换原点 #

默认的transform-origin虽然是中心，但有时候因为布局细节会偏移，手动指定中心原点能确保旋转时完全对称：

.burger-close .burger-line:nth-child(1) {
  transform: rotate(45deg);
  transform-origin: center;
}

.burger-close .burger-line:nth-child(2) {
  opacity: 0;
}

.burger-close .burger-line:nth-child(3) {
  transform: rotate(-45deg);
  transform-origin: center;
}

4. 移除可能导致偏移的额外样式 #

检查你的代码里有没有给线条加margin-left/margin-right，或者给容器加了不对称的padding/position值，这些都会导致X按钮偏移，把它们调整为对称的或者直接移除就行。

这样调整后，X按钮的两条线会以容器中心为原点旋转，加上对称的容器尺寸，就能完美实现左右对称的效果啦！

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