调整动画导航汉堡切换器尺寸，避免十字图标错位的方法求助

我在开发一款治疗类网站的动画汉堡导航切换器，基于HTML、CSS和JavaScript实现，已经完成全设备适配，但遇到一个问题：缩小切换器尺寸时，激活状态下的十字图标会出现错位。尝试修改.btnMenu02的宽高以及内部span线条的高度后，十字图标仍然偏移错位，求能缩小切换器同时保持图标对齐的技巧。

核心优化思路 #

问题根源在于原代码使用固定像素值控制间距和变换偏移，缩小按钮尺寸时这些固定值无法自适应。优化方向：

• 用Flex布局让内部图标容器始终居中，摆脱对margin定位的依赖
• 将固定的margin和transform偏移值改为动态计算值，基于线条高度和间距关联
• 用容器padding控制整体内边距，确保缩放时布局稳定

修改后的完整代码 #

<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">

<!-- Bootstrap CSS-5.3.3 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<!--Font Awesome-->
<link rel="stylesheet" type="text/css" href="assets/css/font-awesome.css">

<!-- Latest jQuery library for plugins that require it-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style type="text/css">


/*=========================Header========================*/
/*Navbar*/
.navbar{
position: absolute;
width: 100%;
top: 0;
}


/*hero banner*/
.hero-image{
/* Set a specific height */
height: 267px;
background-color:green;

/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}

/* Place text in the middle of the image */
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}

/*Hamburger toggler*/

 button {
     cursor: pointer;
     background: none;
     border: none;
     outline: none;
     appearance: none;
}

 .btns {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
}
 .btns_item {
     margin: 0 20px;
     text-align: center;
}

/* ------------------------------------------------------------ * #02 * ------------------------------------------------------------ */
 .btnMenu02 {
     width: 60px; /* 可自由调整这个值来缩小/放大按钮 */
     height: 60px;
     background-color: #000;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 8px;
}
 .btnMenu02 > span {
     display: block;
     width: 100%;
     position: relative;
     transition: all 0.4s ease-in-out;
}
 .btnMenu02 > span > span, .btnMenu02 > span::before, .btnMenu02 > span::after {
     display: block;
     width: 100%;
     height: 6px;
     margin: 6px 0;
     content: '';
     background-color: #fff;
     border-radius: 4px;
     transition: all 0.2s ease-in-out;
}
 .btnMenu02.is-open > span {
     transform: rotate(180deg);
}
 .btnMenu02.is-open > span > span {
     opacity: 0;
}
 .btnMenu02.is-open > span::before {
     transform: translateY(12px) rotate(-45deg); /* 偏移值 = 线条高度 + 上下间距 */
}
 .btnMenu02.is-open > span::after {
     transform: translateY(-12px) rotate(45deg);
}


/*//Hamburger toggler*/

</style>
</head>
<body>

<header>
<div class="hero-image">
<img class="hero-image" src="assets/images/banner.png" alt="">

<div class="hero-text">
<h2 style="font-size: 20px">Natural Therapist</h2>
<button>Hire me</button>
</div>
</div>

<!--Nav-->

<nav class="navbar navbar-default navbar-expand-lg ">
<div class="container-fluid">

<a class="navbar-brand " href="#">Logo</a>
<button class="navbar-toggler btnMenu02 js-btnMenu" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarTogglerDemo" aria-expanded="false" aria-label="Toggle navigation">


<span><span></span></span>

</button>
<div class="collapse navbar-collapse " id="navbarToggler">
<ul class="navbar-nav mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>

<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>

</div>
</div>
</nav>

<!--/Nav-->

</header>

<script type="text/javascript">
    

$(function() {
  $('.js-btnMenu').on('click', function() {
    $(this).toggleClass('is-open');
  });
});

</script>

<!--//Header
==================================-->

<!-- javascript (necessary for Bootstrap's JavaScript plugins) --> 
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

<!--personal javascripts-->
<script src="assets/js/main.js"></script>

</body>
</html>

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