flex垂直居中必须同时设置display: flex和align-items: center，且父容器需有可测量的交叉轴长度（如height、min-height），否则无法生效；justify-content: center仅控制主轴，align-content仅适用于多行flex容器。
flex垂直居中必须写的两个CSS属性
只写 display: flex 或只写 align-items: center 都不行。真正起效的最低配置是：display: flex + align-items: center，缺一不可。
常见错误是误用 justify-content: center ——它只管水平方向（主轴），对垂直没作用；align-content 也无效，它只在多行 flex 容器里才参与计算。
-
align-items: center是唯一控制单行子元素在交叉轴（默认为垂直方向）居中的属性 - 如果父容器设了
flex-direction: column，那主轴就变成垂直，此时justify-content: center才管垂直，但这是非常规用法，不推荐为居中而改方向 - 子元素本身不需要任何额外样式，哪怕它是
<span></span>或文本节点，只要父容器是 flex 且交叉轴有长度，就能对齐
父容器高度必须可测量，否则 align-items 失效
align-items: center 的计算依赖交叉轴长度。如果父容器高度塌陷（比如只有 width、没设 height 或 min-height，内部又没内容撑开），那“居中”就失去参照，结果就是贴顶。
- 可靠方案：直接写
height: 100vh、min-height: 100vh或固定值如height: 400px - 靠内容撑高也可以，但前提是子元素本身有高度（比如图片、设置了
line-height的文本、或含 padding 的块级元素） -
height: auto+ 空内容 = 高度为 0 →align-items: center无意义
别和 margin: auto 混用，尤其在 Safari 中会偏移
给子元素加 margin: auto 在 flex 容器里看似“也能居中”，但实际行为不稳定：Safari 会优先按 margin 计算，导致上下错位；Chrome 和 Firefox 表现也不一致。
- 完全没必要混用 ——
align-items: center已经足够 - 如果子元素是
<img>或<button></button>，它们自带默认 margin，建议显式重置：margin: 0 - 绝对定位元素（
position: absolute）在 flex 容器里会脱离 flex 流，align-items对它无效
按钮内多行文本垂直居中要直接对 button 设 flex
不要给按钮内部文字包一层 <span></span> 再设 flex，更不要用 line-height —— 后者只对单行有效，多行时会撑高按钮或文字溢出。
- 直接在
<button></button>上设：display: flex、align-items: center、justify-content: center（可选）、height或min-height - 按钮内混合图标和文字时，同样生效，无需额外处理
- 避免同时设
line-height，它会干扰 flex 的基线对齐逻辑
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
