我无法将 span 元素重新定位在按钮中间，从某些角度来看，即使我尝试使用 display flex ，这种情况也会发生在外面，并且在 css 中进行转换也不起作用，我很惊讶这不起作用。
到目前为止，我的代码看起来像这样：
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>
CSS
*, *::after, *::before{
box-sizing: border-box;
}
body{
background-color: #171717;
padding: 20px;
}
.hamburger{
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding:10px;
margin: 10px;
position: relative;
box-sizing: border-box;
display: inline-block;
cursor: pointer;
background-color: transparent;
border: 0;
margin: 0;
width: 50px;
border:3px solid pink;
}
.hamburger_box{
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border:3px solid red;
width:40px;
height:24px;
display: inline-block;
position: relative;
background-color: aqua;
}
.hamburger__inner{
display: flex;
align-items: center;
justify-content: center;
text-align: center;
top:0;
top:50%;
transform: translateY(-50%);
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;
}
我使用了变换，我希望在按钮中间得到这个跨度元素，但它并没有真正的帮助。我错过了什么？？
删除汉堡类中的显示：内联块。
.hamburger{
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding:10px;
margin: 10px;
position: relative;
box-sizing: border-box;
cursor: pointer;
background-color: transparent;
border: 0;
margin: 0;
width: 50px;
border:3px solid pink;
}