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