父容器必须有可测量高度，否则align-items: center静默失效；应设min-height: 100vh或height: 100%，并确保html/body高度继承，或改用margin: auto实现单子元素居中。
直接用 display: flex + justify-content: center + align-items: center 就能实现单个子元素的水平垂直居中——但前提是父容器有可测量的高度，否则 align-items: center 会静默失效。
父容器没设高度，align-items: center 不生效怎么办
垂直居中依赖交叉轴（默认 Y 轴）有明确尺寸。如果父容器靠内容撑开、没设 height 或 min-height，align-items: center 就“找不到中线”，子元素只水平居中、垂直贴顶。
- 加
min-height: 100vh（适合全屏场景），比height: 100vh更安全，避免内容超长时被截断 - 用
height: 100%时，必须确保html和body都显式设了height: 100% - 更省事：改用
margin: auto——子元素加margin: auto，父容器保持display: flex，无需任何高度设置，它自动在二维方向填满剩余空间
flex-direction: column 下对齐写反了怎么办
justify-content 和 align-items 不认“上下左右”，只认主轴和交叉轴。主轴由 flex-direction 决定，写错方向，对齐就全反。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
flex-direction: row（默认）：主轴水平 →justify-content控左右，align-items控上下 -
flex-direction: column：主轴垂直 →justify-content控上下，align-items控左右 - 常见错误：设了
flex-direction: column还写justify-content: center想“水平居中”，结果所有子项堆在顶部垂直居中 - 正确做法：此时要水平居中，必须用
align-items: center
多个子元素想整体居中，别用 justify-content: space-between
space-between 是把首尾项目顶到两端，中间均分空隙，视觉上并不居中；它适合等距分布，不是居中布局。
- 真正让整组“浮动居中”的是
justify-content: space-around或justify-content: space-evenly - 如果只是想让多个子项像一个块一样居中排列，仍用
justify-content: center即可 -
margin: auto在多子项场景下不适用——它只对单个子元素生效；多个子项需靠justify-content控制整体位置
最容易被忽略的是父容器的尺寸边界：flex 居中不是魔法，它需要一个有界的空间来计算“中”。没高度、没 max-height、也没 min-height 的父容器，justify-content 和 align-items 都可能静默失效。动手前先确认容器是否真有可测量的尺寸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
