Flexbox垂直居中关键在父容器需有明确高度边界，如min-height: 100vh；align-items: center原生支持未知尺寸，但无高度则失效；注意flex-direction切换时justify-content与align-items作用轴互换，全向居中应确保主轴为row。
Flexbox 实现未知宽高元素的垂直居中，关键不在“绝对”，而在父容器是否提供有效的交叉轴范围——align-items: center 本身就能处理未知尺寸，但前提是它有可参考的高度边界。
父容器必须有明确的 height 或 min-height
常见错误是只写 display: flex; align-items: center;，却没给父容器设高度。浏览器不知道“垂直方向的中心”在哪，align-items 就无从生效。
-
min-height: 100vh比height: 100vh更安全：内容超长时不会被截断 - 如果父容器是
body或html，记得也设height: 100%，否则100vh在某些嵌套场景下可能失效 - 调试时临时加
outline: 1px solid red看父容器实际占位，能快速判断是不是塌陷了
align-items 和 justify-content 别搞反方向
默认 flex-direction: row 时，justify-content 控制水平，align-items 控制垂直。但一旦改成 column，两者作用就互换——这在响应式切换布局时容易翻车。
- 全向居中推荐固定写法：
justify-content: center; align-items: center; - 如果父容器用了
flex-direction: column，上面那行代码实际会让子元素水平居中、垂直靠上（因为主轴变垂直了） - 不确定方向时，直接查 computed styles 里的
main axis和cross axis，比死记更可靠
子元素不需要任何 margin 或 transform
有人会给子元素加 margin: auto 或 transform: translateY(-50%)，这在 Flex 容器里纯属多余，还可能干扰布局逻辑。
立即学习“前端免费学习笔记（深入）”；
-
margin: auto在 Flex 容器中确实能居中，但它优先级低于justify-content/align-items，且行为依赖于 flex 项目是否为单个、是否设了flex相关属性 -
transform是脱离文档流后的偏移，和 Flex 的布局计算无关，混用可能造成视觉错位或动画抖动 - 未知宽高时，
align-items: center原生支持，无需额外干预
真正容易被忽略的是 iOS Safari 对 100vh 的处理：地址栏收放会导致视口高度跳变，min-height: 100vh 有时仍会“卡”在旧高度。需要全屏精确居中时，得配合 JS 动态读取 window.innerHeight 并写入 CSS 变量。
