scroll-snap-align: center 仅定义子元素中心对齐容器中心线，需配合 scroll-snap-type: x/y mandatory 才生效；必须设置容器 overflow 和明确宽高，子元素宜用固定尺寸+flex-shrink: 0，避免 margin 和嵌套滚动。
scroll-snap-align: center 本身不会让元素“居中显示”，它只定义该子元素的中心点对齐滚动容器的中心线——是否真能居中，取决于容器尺寸、子元素尺寸、padding/margin 和 overflow 行为。
scroll-snap-align: center 必须配合 scroll-snap-type: x/y mandatory 才生效
单独写 scroll-snap-align: center 没用，浏览器直接忽略。它必须和父容器的 scroll-snap-type 配合使用：
-
scroll-snap-type: x mandatory才能触发横向居中吸附（比如轮播图） -
scroll-snap-type: y mandatory对应垂直方向，但center在长页面分屏中极少用，容易因内容高度不一致导致错位 - 别用
scroll-snap-type: mandatory（缺方向），语法非法，DevTools 会报 warning - 移动端 Safari 要求容器有明确
overflow-x: auto或scroll，仅靠touch-action: pan-x不够
横向轮播居中时，子元素宽度不能靠百分比“自适应”
常见翻车点：给 .item 设 width: 100% 或 flex: 1，结果吸附失效或偏移。因为 scroll-snap-align: center 的锚点是元素自身的几何中心，如果元素宽度被 flex 或内容撑开，中心就飘了。
- 固定宽高最稳：
flex: 0 0 300px+height: 200px - 若需响应式，用
min-width+max-width限定范围，避免缩放失准 - 务必加
flex-shrink: 0（或flex: none），防止 Flex 容器压缩子项 - 避免在子元素上设
margin，它会被计入对齐计算——用gap控制间距更安全
滚动容器必须有明确尺寸和溢出行为
很多人把 scroll-snap-type 写对了，但容器没滚动起来，center 就纯属摆设。
- 容器需显式设
overflow-x: auto（横向）或overflow-y: auto（纵向） - 容器要有足够宽度/高度容纳所有子项，否则无溢出，无滚动，无吸附
- 推荐设
scroll-padding: 0显式清空默认内边距干扰；如需留白，改用scroll-padding-inline: 24px - 不要在容器上同时用
position: sticky或transform，WebKit 下可能禁用 scroll snap
iOS Safari 的 center 吸附有惯性偏移，别依赖视觉对齐
真机测试会发现：快速滑动后松手，卡片常停在“看起来差不多居中”的位置，但 computed styles 里 scroll-left 并不精确落在中心点。这不是 bug，是 WebKit 的滚动物理模型决定的。
- 用
scrollend事件 +scrollTo({ behavior: 'smooth' })可手动微调，但会增加 JS 负担 - 若要求绝对精准（比如设计稿像素级对齐），
scroll-snap-align: center不适合，该换 JS 驱动的轮播库 - DevTools 的“滚动捕捉可视化”开关（Layout → Scroll Snap）仅供参考，实际以手指滑动为准
- 别在子元素里嵌套另一个
overflow: scroll容器，滚动嵌套会打断 snap 链路
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
