本文详解如何在 flex: 1 均分容器的按钮组中，让绝对定位的指示条（.selected-button）精确垂直居中于当前选中按钮，并通过 CSS left 百分比 + transform 实现无 JS 计算的平滑滑动效果。
本文详解如何在 `flex: 1` 均分容器的按钮组中，让绝对定位的指示条（`.selected-button`）精确垂直居中于当前选中按钮，并通过 css `left` 百分比 + `transform` 实现无 js 计算的平滑滑动效果。
在现代前端开发中，导航栏下的高亮指示器（如底部横线、色块等）是常见交互元素。当按钮使用 flex: 1 均分父容器宽度时，指示器若需垂直居中对齐按钮内容区（而非按钮自身底边），且支持平滑过渡切换，直接依赖 top/bottom 或 margin 往往失效——因为按钮高度固定但内容垂直位置由 align-items: flex-end 控制，而指示器需锚定在按钮视觉中心垂线。
核心思路是：利用等宽 Flex 子项的几何对称性，将指示器的定位基准从“按钮 DOM”转移到“容器百分比坐标系”。由于两个按钮各占 50% 宽度，且 .header-buttons 占满 .header 水平空间，可推导出：
- 左按钮水平中点 → 25%（即 50% × 0.5）
- 右按钮水平中点 → 75%（即 50% + 50% × 0.5）
此时，只需让指示器自身水平居中（left: 50%; transform: translateX(-50%)），再将其 left 值动态设为 25% 或 75%，即可完美对齐对应按钮中心。
✅ 关键 CSS 实现
.selected-button {
height: 4px;
width: 53px;
background-color: rgb(29, 155, 240);
position: absolute;
bottom: 0; /* 锚定在按钮组底部 */
border-radius: 15px;
left: 25%; /* 默认选中左按钮 */
transform: translateX(-50%); /* 自身水平居中 */
transition: left 150ms cubic-bezier(0, 0, 0.2, 1); /* 平滑过渡，符合 Material Design 动效规范 */
}? 为什么 transform: translateX(-50%) 不可省略？
left: 25% 仅将元素左边缘定位到容器 25% 处。添加 transform: translateX(-50%) 后，元素会向左移动自身宽度的 50%，使其中心点精准落在 25% 位置，从而与左按钮中心对齐。
✅ JavaScript 交互逻辑
const indicator = document.querySelector('.selected-button');
document.querySelector('.for-you-button').addEventListener('click', () => {
indicator.style.left = '25%';
});
document.querySelector('.following-button').addEventListener('click', () => {
indicator.style.left = '75%';
});无需维护状态变量（如 selectedHeaderButton），直接操作样式属性，简洁高效。若需初始化状态或支持键盘导航，可额外添加 classList 切换逻辑。
⚠️ 注意事项与优化建议
- 响应式兼容性：该方案依赖按钮等宽布局。若后续增加第三个按钮，需按 (100% / 按钮数) / 2 重新计算 left 值（如三按钮：16.67%、50%、83.33%）。
- 无障碍访问：建议为按钮添加 aria-current="page" 属性（动态更新），并确保指示器有足够对比度（WCAG AA 标准）。
- 性能优化：left 属于可硬件加速属性，但频繁内联样式可能触发重排。如需更高性能，可改用 CSS 自定义属性 + @property（现代浏览器）或 requestAnimationFrame 批量更新。
- 默认选中态：CSS 中已设 left: 25%，页面加载即显示左按钮高亮，避免闪动。
此方案摒弃了 getBoundingClientRect() 等运行时测量，完全基于 CSS 布局特性，代码轻量、性能优异，且易于维护——正是专业级 UI 组件应具备的健壮性与可扩展性。
