汉堡菜单<span>元素超出<button>，CSS居中设置无效求助

我无法将汉堡菜单的元素定位在元素中央，即便使用display:flex和CSS transform属性也无效，元素甚至会超出按钮范围。我尝试了transform属性，期望实现居中效果但未成功，请问我遗漏了什么？

问题根源 #

你的代码里存在几个关键问题导致居中失效：

• 重复定义display属性：.hamburger和.hamburger_box都先设置了display:flex，又紧接着设置display:inline-block，后者会覆盖前者，导致flex的居中属性完全失效。
• 冗余的flex设置：.hamburger__inner是用来生成汉堡线条的元素，不需要设置display:flex，反而会干扰其定位逻辑。
• 不必要的定位冲突：.hamburger__inner同时设置了top:0和top:50%，虽然后者会覆盖前者，但属于冗余代码，容易混淆逻辑。

修正后的代码 #

CSS部分

*,*::after,*::before {box-sizing: border-box;}
body {background-color: #171717;padding: 20px;}
/* 保留flex属性，去掉重复的inline-block */
.hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: transparent;
  border: 3px solid pink;
  margin: 0;
  width: 50px;
  height: 50px; /* 给按钮设置固定高度，确保垂直居中基准 */
  padding: 0; /* 去掉多余padding，避免挤压内部元素 */
}
/* 同样保留flex，去掉inline-block */
.hamburger_box {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid red;
  width: 40px;
  height: 24px;
  position: relative;
  background-color: aqua;
}
.hamburger__inner {
  width: 100%;
  height: 3px;
  background-color: #FFFFFF;
  position: relative;
}
.hamburger__inner::after,.hamburger__inner::before {
  left: 0;
  content: "";
  width: 100%;
  height: 3px;
  background-color: #FFFFFF;
  position: absolute;
}
.hamburger__inner::after {
  top: 10px;
}
.hamburger__inner::before {
  top: -10px;
}

HTML部分（无需修改）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <button class="hamburger">
        <span class="hamburger_box">
        <span class="hamburger__inner"></span>
        </span>
    </button>
</body>
</html>

关键修改说明 #

• 给.hamburger添加固定高度height:50px，并去掉多余的padding，确保flex居中的基准容器尺寸明确。
• 移除.hamburger和.hamburger_box中重复的display:inline-block，保留display:flex来实现层级居中。
• 删掉.hamburger__inner中冗余的display:flex、top:0和transform属性，因为.hamburger_box的flex已经能让它居中，而线条的上下偏移通过伪元素的top属性即可实现。

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