如何用 CSS 精准居中并平滑切换底部指示条（基于 Flex 布局的按钮组）

霞舞 2026-01-05 00:00:00 次阅读

本文详解如何在 `flex: 1` 均分布局的按钮组下，将绝对定位的指示条（`.selected-button`）垂直对齐于选中按钮底部，并实现 150ms 缓动滑动效果。核心在于利用百分比定位 + `transform` 居中 + css 过渡。

在响应式导航栏中，常需为等宽按钮（如 “For You” 和 “Following”）添加一个底部高亮指示条。由于按钮使用 flex: 1 均分父容器宽度，其实际像素宽度不可预知，因此不能依赖固定 left 值或 margin-left。正确解法是结合容器级百分比定位与元素自身尺寸补偿。

✅ 正确居中原理：百分比 + transform 补偿

.header-buttons 宽度为 100%，两个 flex: 1 按钮各占 50%。此时：

按钮 1（For You）水平中心位于 25%（即 0% + 50% / 2）
按钮 2（Following）水平中心位于 75%（即 50% + 50% / 2）

但 .selected-button 默认以左边缘为定位基准。若直接设 left: 25%，其左边缘会落在按钮中心，导致整体右偏半个宽度。因此必须用 transform: translateX(-50%) 将其向左微调自身宽度的一半，从而实现视觉中心对齐：

.selected-button {
  position: absolute;
  bottom: 0;
  height: 4px;
  width: 53px; /* 固定宽度，便于 translateX(-50%) 计算 */
  background-color: #1D9BF0;
  border-radius: 15px;
  left: 25%; /* 初始选中左侧按钮 */
  transform: translateX(-50%); /* 关键：使元素中心对齐 left 值位置 */
  transition: left 150ms cubic-bezier(0, 0, 0.2, 1); /* 平滑过渡 */
}

✅ JavaScript 控制切换逻辑

通过监听按钮点击，动态修改 .selected-button 的 left 值：

立即学习“前端免费学习笔记（深入）”；

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%'; // 对齐第二个按钮中心
});