Flexbox居中只需父容器设display:flex，再用justify-content控制主轴、align-items控制交叉轴；注意主轴由flex-direction决定，父容器需有高度上下文（如min-height:100vh）并清除默认margin。
flexbox 居中靠 justify-content 和 align-items 就够了
单行、单列的块级元素居中，不需要 margin、绝对定位或 transform。核心就两个属性：justify-content 控制主轴（默认是水平方向），align-items 控制交叉轴（默认是垂直方向）。父容器设为 display: flex 后，这两个属性直接生效。
常见错误是只设一个——比如只写 justify-content: center，结果元素水平居中但垂直贴顶；或者误以为 align-items 能对齐子元素内部文字，其实它只对齐子元素整体。
- 主轴方向由
flex-direction决定：默认row（主轴水平），此时justify-content水平生效，align-items垂直生效 - 若改成
flex-direction: column，主轴变垂直，justify-content就管垂直对齐，align-items管水平对齐 - 如果子元素高度不固定（比如含动态文字），
align-items: center仍能居中，但需确保父容器有明确高度（否则可能“没地方可居中”）
要垂直居中又不想设父容器高度？用 min-height: 100vh
很多场景下，页面级居中要求“视口内垂直居中”，但父容器没设 height，导致 align-items: center 看不出效果。这不是 flex 失效，而是父容器高度塌缩为内容高，交叉轴没空间可分配。
解决方法不是硬写 height: 100vh（可能撑破内容），而是用 min-height: 100vh，既保证最小占满视口，又允许内容超出时自然延伸。
立即学习“前端免费学习笔记（深入）”；
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
注意：若 body 有默认 margin（如某些浏览器），必须显式设 margin: 0，否则顶部留白会干扰居中计算。
align-self 可单独控制某个子项，但慎用
当多数子项按统一规则对齐，仅一两个例外时，align-self 比重写整个布局更轻量。它在子元素上设置，优先级高于父级的 align-items。
- 取值和
align-items一致：flex-start、center、flex-end、stretch（默认）等 - 它只影响交叉轴；主轴方向仍服从父级
justify-content - 不要在所有子项都加
align-self—— 那等于放弃父级统一控制，维护成本陡增 - 对
display: inline-flex容器也有效，但要注意行内容器本身受文本基线影响，可能产生意外偏移
文字在 flex 子项里不居中？别动 align-items，改 line-height 或 text-align
新手常混淆层级：flex 的 align-items 是让「整个子元素盒子」在交叉轴居中，不是让盒子里的文字居中。如果子项是 <div>文字</div>，且没设高度，那它高度就是文字行高，自然“看起来没动”。
正确做法分情况：
- 纯单行文字：给子项设固定高度 +
line-height等于该高度，再配合text-align: center - 多行文字或响应式需求：子项设
display: flex+flex-direction: column+justify-content: center+align-items: center，形成嵌套 flex - 避免给子项设
align-self: center试图“修复文字”，这只会让它在父容器中居中，文字本身依然左对齐
真正容易被忽略的是：flex 居中依赖父容器的尺寸上下文。没有明确的高度（或最小高度）、没有清除默认 margin/padding、或子项用了 float / position: absolute，都会让 flex 行为失效——这时候先检查这些，而不是调参数。
