如何让flex:1布局的选中按钮指示器垂直居中并平滑滑动

解决方案 #

1. 修复指示器垂直居中问题 #

原指示器贴在header底部，要让它位于选中按钮的垂直居中位置，需调整其bottom值：
按钮容器.header-buttons高度为106.5px，按钮高度53px且靠底部对齐，按钮垂直中心距离header底部的距离为(53px - 4px)/2 = 24.5px，因此给.selected-button设置bottom: 24.5px。

2. 实现平滑滑动效果 #

给.selected-button添加transition: left 0.3s ease，让位置变化时产生平滑过渡动画。

3. 完善JS逻辑，动态计算指示器位置 #

原JS仅更新选中状态变量，未同步指示器位置。需在点击按钮时，获取目标按钮的位置信息，计算出指示器的水平居中偏移量。

修改后的完整代码 #

HTML（结构无改动）

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

<header class="header-background">
  <header class="header">
    <div class="nav-selected">Home</div>
    <div class="header-buttons">
      <button class="for-you-button">For You</button>
      <button class="following-button">Following</button>
    </div>
    <div class="selected-button"></div>
  </header>
</header>
<main>
  <div class="tweet-container">
    <img>
    <div>Minecraft <span>@Minecraft &centerdot; Jul 12</span></div>
    <div>
      It's time for a new type of challenge! Show us your mob-making skills and build your pet in Blockbench. Don't forget to use the hashtag #FeatureMeMinecraft! Get started in our Creator Portal: https://minecraft.net/en-us/creator
    </div>
  </div>
</main>

CSS（修改.selected-button样式）

body {
  height: 3000px;
  margin-top: 100px;
  font-family: Noto Sans, Arial;
}

.header {
  position: relative;
  text-align: center;
  top: 0;
  left: 0;
  right: 0;
  border-bottom: 1px solid rgb(239, 243, 244);
  height: 106.5px;
}

.header-background {
  background-color: rgb(255, 255, 255, 0.5);
  top: 0;
  left: 0;
  right: 0;
  height: 106.5px;
  backdrop-filter: blur(4px);
  position: fixed;
}

.nav-selected {
  display: block;
  font-weight: bold;
  text-align: left;
  margin-left: 15px;
  font-size: 19px;
  filter: none;
  margin-top: 15px;
  margin-left: 10px;
}

.header-buttons {
  position: absolute;
  height: 106.5px;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-end;
}

.for-you-button,
.following-button {
  flex: 1;
  border: none;
  background-color: rgba(255, 255, 255, 0);
  font-weight: 600;
  font-size: 15px;
  height: 53px;
  transition: background-color 150ms;
  text-align: center;
  color: rgb(83, 100, 113);
}

.for-you-button:hover,
.following-button:hover {
  background-color: rgba(200, 200, 200, 0.5);
}

.selected-button {
  height: 4px;
  width: 53px;
  background-color: rgb(29, 155, 240);
  position: absolute;
  bottom: 24.5px;
  border-radius: 15px;
  left: var(--x);
  transition: left 0.3s ease;
}

JavaScript（完善位置计算逻辑）

let selectedHeaderButton = 1;
const indicator = document.querySelector('.selected-button');
const forYouBtn = document.querySelector('.for-you-button');
const followingBtn = document.querySelector('.following-button');

// 设置指示器位置，使其水平居中于目标按钮
function setIndicatorPosition(targetBtn) {
  const btnWidth = targetBtn.offsetWidth;
  const btnLeft = targetBtn.offsetLeft;
  const indicatorLeft = btnLeft + (btnWidth - indicator.offsetWidth) / 2;
  indicator.style.setProperty('--x', `${indicatorLeft}px`);
}

// 页面加载时初始化第一个按钮的指示器位置
window.addEventListener('load', () => {
  setIndicatorPosition(forYouBtn);
});

forYouBtn.addEventListener('click', () => {
  selectedHeaderButton = 1;
  setIndicatorPosition(forYouBtn);
});

followingBtn.addEventListener('click', () => {
  selectedHeaderButton = 2;
  setIndicatorPosition(followingBtn);
});

关键说明 #

• 垂直居中：通过计算按钮与指示器的高度差，设置bottom:24.5px，让指示器精准落在按钮垂直中线位置。
• 平滑滑动：transition: left 0.3s ease属性实现指示器位置变化时的过渡动画。
• 动态定位：利用offsetLeft和offsetWidth获取按钮的位置与宽度，计算出指示器的水平居中偏移量，适配不同屏幕下的按钮宽度变化。

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