最可靠的轮播按钮垂直居中方案是display: flex + align-items: center，但父容器必须设明确高度（如height: 400px或min-height: 100vh）且启用flex布局，否则按钮将贴顶不居中；若用绝对定位，则父容器需加position: relative，按钮设top: 50%、left: 50%、transform: translate(-50%, -50%)。
轮播按钮用 display: flex 居中时父容器必须设高
轮播图容器（比如 .carousel）默认是块级、高度由内容撑开，但按钮要垂直居中，它必须有明确高度参考。常见错误是只写了 display: flex; align-items: center; 却没给容器设 height 或 min-height，结果按钮贴顶不动。
- 如果轮播图高度固定（如
height: 400px），直接在容器上加height和display: flex - 如果是全屏轮播，必须写
html, body { height: 100%; margin: 0; }，再给.carousel { height: 100vh; display: flex; align-items: center; } - 按钮本身别设
margin: auto——Safari 下会和align-items: center冲突，导致上下偏移 - 若按钮是
<button></button>或<a></a>，不用改display，flex 会自动处理内联元素对齐
用 position: absolute + transform 时父容器要加 position: relative
轮播容器常带 overflow: hidden 或动画逻辑，不适合改 flex 布局？那就用绝对定位。但漏掉 position: relative 是高频翻车点——按钮会飞到整个页面左上角，而不是轮播图内部中心。
- 父容器（
.carousel）必须加position: relative - 按钮加
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); - 别拆成
translateX(-50%) translateY(-50%)——多写易漏，且无实际好处 - 如果按钮含图标或文字，宽高动态（比如字体加载延迟），可能闪动；可提前加
min-width: 44px; min-height: 44px;缓解
轮播图里多个按钮（左右箭头）别用 place-items: center
display: grid; place-items: center 看似简洁，但它会让所有直接子元素（包括左右箭头、指示器、标题）一起居中，破坏布局结构。轮播图通常需要左箭头靠左、右箭头靠右、主按钮居中，Grid 的全局居中不适用。
- 单个中央按钮（如“立即购买”）可用
place-items: center，前提是父容器只含它一个子元素 - 左右箭头建议单独定位：
.arrow.left { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); } - IE11 不支持
place-items，需回退到justify-items: center; align-items: center;，但依然受限于多子元素场景
别碰 vertical-align: middle ——它对轮播按钮完全无效
很多老教程说“给按钮加 vertical-align: middle”，但这属性只在行内元素或 table-cell 上生效。轮播按钮通常是块级或 flex 子项，vertical-align 在这里纯属无效代码，还可能干扰其他样式。
- 检查按钮是否被包裹在
<span></span>或<div style="display: table-cell"> 里——这种 hack 已淘汰，且难维护 <li>如果用了 <code>line-height模拟居中，换行或字号变大就立刻破功，轮播图响应式下必崩 - 真正要控制垂直位置，只认
flex、absolute + transform、或grid这三条路
轮播图按钮的垂直居中，核心不在按钮本身，而在父容器的上下文约束是否到位：高度有没有、定位有没有、子元素关系清不清楚。写完没效果，先查这三样，比反复调按钮样式快得多。
