Flex布局不直接制作指示器，而是提供精准定位与响应式排布基础；垂直居中关键在于指示器与父容器的相对定位关系，需用absolute+bottom+transform实现像素级对齐，同步状态依赖radio或JS而非CSS动画。
Flex 布局本身不直接“制作”指示器，而是为指示器提供精准定位和响应式排布的基础。垂直居中的关键不在 flex 容器本身，而在于指示器元素与父容器的相对关系——特别是当它要垂直对齐轮播图底部（如常见 Banner 下方圆点）时。
指示器容器必须用 flex + justify-content: center
很多人给指示器外层加 text-align: center，结果圆点左右偏移、最后一颗被挤出视口。这是因为 text-align 对齐的是内联内容流，而圆点通常是块级元素。正确做法是：
- 指示器容器设
display: flex; justify-content: center; - 每个圆点设
flex: 0 0 auto;（禁止缩放、禁止增长） - 用
gap: 8px;控制间距，比写margin-right更干净，且自动忽略末项 - 避免
float或inline-block，它们会破坏 flex 计算逻辑
圆点尺寸与高亮态要兼顾比例和交互
固定宽高容易在小屏下变形或重叠。推荐组合写法：
-
aspect-ratio: 1;+border-radius: 50%;确保始终是正圆 - 激活态别用
opacity（会削弱 hover 效果），改用background-color或box-shadow - 移动端慎用
:hover，优先用:active或 JS 绑定 click
垂直居中不是靠 align-items，而是靠定位锚点
如果指示器要“垂直居中于轮播图底部”，重点不是让容器 flex 居中，而是让指示器自身 bottom 对齐其父容器底边，并水平居中于对应按钮或图片下方：
- 指示器设
position: absolute; bottom: 0; - 若按钮等宽（如两个按钮各占 50%），则左按钮中心在 25%，右按钮在 75%
- 再配合
left: 25%; transform: translateX(-50%);实现像素级水平居中 - 切换时只需更新
left值（25% → 75%），CSS 自动过渡
同步状态必须靠 radio 或 JS，CSS 无法监听 transform
纯 CSS 轮播中，指示器高亮必须和当前页严格同步。CSS 不能监听 transform 变化，所以可靠方案只有两种：
-
纯 CSS 方案：用
input[type="radio"]+ 兄弟选择器，HTML 顺序必须是：所有 radio → 轮播容器 → 指示器容器 -
JS 方案：监听轮播位移，动态给对应圆点加
.active类，CSS 只负责样式响应 - 不要用 @keyframes 驱动指示器——动画时间难对齐，且无法响应用户点击
