轮播图控制按钮水平居中需将按钮放入 position: relative 的父容器（如.carousel-controls），按钮自身用 position: absolute + top: 50% + transform: translatey(-50%) 垂直居中，左箭头设 left: 1rem，右箭头设 right: 1rem。
轮播图控制按钮（左右箭头）怎么水平居中？
直接给 .prev 和 .next 按钮加 margin: 0 auto 无效——它们默认是 inline-block，且通常被放在绝对定位容器里。真正要居中的不是按钮本身，而是它在轮播容器内的视觉位置。
- 把按钮放进一个相对定位的父容器（比如
.carousel-controls），该容器宽度设为100%、position: relative - 按钮自身用
position: absolute+top: 50%+transform: translateY(-50%)垂直居中 - 左箭头：加
left: 1rem；右箭头：加right: 1rem—— 这比用justify-content更可控，避免 Flex 容器干扰轮播滚动逻辑 - 千万别把按钮塞进
.carousel的 Flex 容器里——它会参与scroll-snap对齐，导致点击后意外跳转
为什么轮播图底部指示器（dots）总偏左？
指示器常被写成 <div class="dots">
<span></span><span></span>
</div>，但只靠 text-align: center 不够：如果父容器没设宽度或用了 display: flex，text-align 就不生效。
- 确保
.dots是块级元素（默认就是），并显式设width: fit-content或display: inline-block - 父容器（如
.carousel-footer）必须设text-align: center，且不能是flex或grid - 每个
<span></span>要统一尺寸：width: 10px; height: 10px; margin: 0 4px;，否则浏览器按内容撑宽，居中计算失准 - 若用 JS 动态生成 dots，检查是否漏了
display: inline-block—— 默认<span></span>是 inline，但某些 CSS 重置会把它变回display: inline，导致margin折叠
轮播图内“立即购买”按钮怎么和图片一起居中？
这类按钮通常覆盖在图片上，属于绝对定位内容。它的居中逻辑和轮播容器无关，只取决于它自己的父容器（即当前 slide 的 wrapper）。
- 给 slide 容器（如
.slide）设position: relative和明确高度（比如min-height: 400px） - 按钮设
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) - 避免同时用
flex居中——transform和align-items混用容易因渲染顺序错位 - 如果按钮文字换行，加
text-align: center到按钮自身，否则只居中第一行
移动端轮播按钮点不到？可能是居中方式破坏了点击区域
用 transform: translate(-50%, -50%) 居中后，按钮的 offsetWidth 和 getBoundingClientRect() 可能返回异常值，尤其在 iOS Safari 下触发区域偏移。
- 优先用
inset替代top/left + transform：inset: 50% auto auto 50%; transform: translate(-50%, -50%)更稳定 - 给按钮加
pointer-events: auto，防止父层overflow: hidden或z-index截断事件 - 测试真机时重点看按钮边缘——很多“点不中”其实是
padding太小，iOS 要求最小触控区域 ≥ 44×44px - 别依赖
vh单位算按钮位置：Safari 地址栏收放会触发视口高度变化，导致按钮瞬间飘走
position: relative 环境中，而任意一层漏设定位或高度，都会让所有居中计算失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
