卡片容器必须设height或min-height才能使align-items: center生效，因其依赖明确交叉轴高度；响应式推荐min-height: 30vh，多层结构应让内容区flex: 1后再居中，按钮底对齐需父容器align-items: stretch或绝对定位。
卡片容器必须设 height 或 min-height 才能生效
Flex 垂直居中不是“自动发生”的——align-items: center 依赖父容器有明确的高度约束。如果卡片高度由内容撑开（比如只有几行文字），align-items: center 看起来就像没起作用。
常见错误是只写：.card { display: flex; align-items: center; }，但没给 .card 设 height 或 min-height。
- 响应式场景推荐用
min-height: 200px（或min-height: 30vh），避免小屏下内容被裁切 - 若卡片嵌套在 Swiper、Grid 或 Flex 容器中，确保其父级已设
align-items: stretch或显式高度 - 不要依赖
height: auto—— 它会让 flex 的交叉轴对齐失去参考基准
内容区用 flex: 1 占满剩余空间，再居中子元素
当卡片内有标题、描述、按钮等多层结构时，直接对整个卡片设 align-items: center 会把所有内容一起拉到中间，破坏阅读流。正确做法是让“内容区域”成为弹性主体，再在其内部居中关键元素。
例如：
.card {
display: flex;
flex-direction: column;
min-height: 240px;
}
.card-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
-
flex: 1等价于flex: 1 0 0，强制占据卡片剩余高度 -
.card-content内部再用justify-content: center居中文本块，不影响顶部标题和底部按钮位置 - 避免在
.card-content上同时设align-items: center和text-align: center—— 文字水平居中靠后者，垂直靠前者，混用易导致意外缩进
按钮固定到底部，别用 margin-top: auto 搞错层级
多卡片并列时，常需“标题长度不一但按钮统一底对齐”。这时不能只靠 margin-top: auto 往下推按钮，而要确保它作用在正确的 flex 容器上。
典型错误：.card { display: flex; flex-direction: column; } .btn { margin-top: auto; } —— 这样按钮会贴到卡片最底部，但若卡片高度不一致，按钮仍会浮动。
- 必须让所有卡片高度一致：父容器（如
.cards-grid）设display: flex; align-items: stretch; - 按钮的
margin-top: auto要放在.card-content内部的最后一个子元素上，而不是直接挂在.card下 - 如果按钮是唯一操作项，更稳妥的做法是把它从内容流中抽出：
.btn { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); }，前提是.card设了position: relative
IE11 及老版 Safari 下 align-items 失效怎么办
Flex 的 align-items: center 在 IE11 中对 min-height 支持不稳定，Safari 13.1 之前版本在 flex column + auto margin 组合下也有偏移。这时候不能硬扛，得有降级方案。
- 优先加回退样式：
.card { display: -ms-flexbox; -ms-flex-align: center; }（IE10–11） - 对 Safari 旧版，改用
display: table-cell; vertical-align: middle;，但需注意：.card要设display: table; width: 100%;，子容器设display: table-cell; - 真正容易被忽略的是：这些兼容写法和现代 flex 不能共存，必须用
@supports (display: flex)包裹现代写法，否则老浏览器会忽略全部
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
