如何实现头部栏logo精确居中、两侧放置不同尺寸元素的布局

需求描述 #

需要实现基础头部栏布局：

• logo精确位于头部栏水平正中央
• 两个尺寸不同的功能图标分别放置在头部栏左右两侧
  当前代码运行后logo出现偏移，未达到预期效果：
  

当前代码 #

CSS部分 #

.showcase header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0px 0px;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

HTML部分 #

<section class="showcase">
  <header>
    <div class="toggle">toggle</div>
    <h2 class="logo">LOGO</h2>
    <div class="booknow">averyverylongbooknow</div>
  </header>
</section>

问题原因 #

justify-content: space-between的布局规则是将容器剩余空间平均分配到相邻元素的间隙中，当左右两侧元素宽度不一致时，中间元素的位置会随两侧宽度差偏移，无法实现相对于整个头部容器的绝对居中。

修复代码 #

给中间logo设置绝对定位实现居中，不受两侧元素宽度影响，修改后的CSS如下：

.showcase header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* 可按需调整左右内边距，避免侧边元素贴边 */
  padding: 0 24px;
  /* 固定盒模型，避免内边距导致宽度溢出 */
  box-sizing: border-box;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  /* 绝对定位相对于header居中 */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* 清除h2标签默认外边距，避免定位偏移 */
  margin: 0;
}

/* 可选：避免侧边内容过长遮挡logo */
.toggle, .booknow {
  max-width: 30%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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