flex垂直居中需父容器设明确高度，否则align-items: center失效；因交叉轴尺寸由内容撑开，导致“居中”退化为贴顶；真未知高度时可用absolute+transform方案。
直接用 display: flex + align-items: center，父容器必须设明确高度（比如 height: 100vh 或 min-height: 200px），否则“居中”只是视觉错觉。
为什么 flex 在未知容器高度时会失效？
Flex 的 align-items: center 是按父容器的 **可用交叉轴尺寸** 计算居中的。如果父容器没设 height 或 min-height，它的高度由内容撑开——此时“居中”就退化成贴顶，因为可用高度 ≈ 子元素自身高度。
- 常见错误现象：
.container { display: flex; align-items: center; }写了但子元素还是贴在顶部 - 真正原因：父容器没有高度约束，浏览器计算出的交叉轴长度就是子元素高度本身
- 哪怕子元素是多行
<p></p>或动态渲染的卡片，只要父容器没高，flex 就“无处可中”
容器高度真未知时，用 position: absolute + transform: translateY(-50%)
这是唯一不依赖父容器高度、也不需要知道子元素尺寸的纯 CSS 方案，适用于弹窗、提示框、浮动按钮等场景。
- 父容器需设
position: relative - 子元素设
position: absolute; top: 50%; transform: translateY(-50%) - 注意：
transform: translateY(-50%)中的-50%是相对于子元素自身高度计算的，不是父容器 - 如果还要水平居中，加
left: 50%; transform: translate(-50%, -50%) - 慎用在滚动容器里——
position: absolute会脱离文档流，可能影响布局逻辑
别用 padding “假装”垂直居中
给父容器设上下相等的 padding（比如 padding: 40px 0）能让多行文字“看起来”居中，但这不是真正的垂直居中，而是靠内边距把内容推到中间位置。
- 问题一：容器高度完全由内容 + padding 决定，无法控制最小高度
- 问题二：一旦子元素有 margin 或 border，视觉中心就会偏移
- 问题三：响应式下 padding 值难适配，小屏容易溢出或留白过多
- 适用场景仅限静态文案块，且你明确接受“非精确居中”的妥协
真正麻烦的地方不在方法本身，而在于判断：这个容器的高度到底是“真未知”，还是“你以为未知但其实能设”。比如全屏模块用 height: 100vh、卡片区域用 min-height: 200px，往往比硬套绝对定位更稳定、更易维护。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
