可靠居中需父容器设 d-flex + min-vh-100，否则 align-items-center 无效；栅格用 col-12 col-md-8 col-lg-4 mx-auto 响应式居中；避免 vh-100 和 body{height:100vh} 冲突；卡片悬停用 transform 非 margin，且父容器禁 overflow:hidden。
直接用 d-flex + min-vh-100 + align-items-center 就能可靠居中，但必须确保父容器没被其他 CSS 截断高度、没嵌套破坏 flex 链路的中间层。
为什么 align-items-center 加了也没反应
根本就两个原因：父容器没设 d-flex，或者没高度上下文。Bootstrap 的 .row 虽默认是 flex 容器，但它本身高度是 auto——内容多高它就多高，不是“撑满视口”。所以光加 align-items-center 没用。
-
min-vh-100必须加在 flex 容器的直接父级上（比如.container-fluid），不能只加在.row上 - 别在
.row外再套一层没加d-flex的<div>，那会中断 flex 作用域 <li>检查浏览器 DevTools 的 computed height，确认父级真实高度是不是 100vh</li> <h3>大屏居中 vs 小屏全宽的栅格写法</h3> <p>用 <code>col-12 col-md-8 col-lg-4 mx-auto是最稳的组合，不是靠媒体查询手动切类，而是让 Bootstrap 栅格自己响应。-
col-12确保小屏下卡片占满整行宽度，避免左右留白 -
col-md-8在中等屏（≥768px）收窄到 8 列，比全宽更易读 -
col-lg-4在大屏（≥992px）进一步收窄到 4 列，视觉更聚焦 -
mx-auto在 flex 布局下依然有效，负责水平居中；它不依赖 float 或 position
避免小屏底部留白的关键 CSS
单纯用
vh-100有风险：当卡片内容很短时，vh-100会让容器强制拉高，但align-items-center仍会把卡片“居中”在那个空高的容器里，结果就是卡片悬在屏幕中间、下方大片空白。立即学习“前端免费学习笔记（深入）”；
- 必须用
min-vh-100替代vh-100，它保证最小高度为视口高，内容超长时不会截断 - 如果页面有固定顶部导航栏，给 flex 容器加
pt-5或mt-5补偿，别硬调top - 删掉自定义的
body { height: 100vh }，它和 Bootstrap 的h-100/min-vh-100冲突，容易导致滚动条异常
卡片自身悬停上移时的常见翻车点
加
transform: translateY(-6px)是标准做法，但真上线后常发现阴影被裁、卡片模糊、或上移后底部露白。- 父容器（比如
.row）不能设overflow: hidden，否则box-shadow和transform效果会被剪掉 - 别用
margin-top: -6px替代transform，它会触发重排，低端安卓机明显卡顿 - 移动端没有 hover，纯 CSS 实现不了点击反馈；加
tabindex="0"并写.card:focus规则，才是兼顾可访问性的写法
真正卡住人的地方往往不在 class 名写错，而在某一层父容器悄悄加了
height: auto、overflow: hidden或覆盖了display: flex——建议从外往内逐层检查 computed styles，而不是反复改卡片本身的类。 -
