flexbox 水平垂直居中需 display: flex、justify-content: center 和 align-items: center 三者配合，但关键在于父容器必须有可计算的交叉轴尺寸（如 min-height: 100vh），否则 align-items: center 失效；需注意嵌套结构中逐层设置、主轴方向变化时属性作用互换、绝对定位元素不生效等问题。
Flexbox 实现水平垂直居中，display: flex、justify-content: center 和 align-items: center 三者缺一不可，但真正卡住人的往往不是写错属性，而是父容器高度没算明白。
父容器必须有可计算的交叉轴尺寸
所谓“居中失效”，90% 是因为 align-items: center 所依赖的交叉轴（默认为垂直方向）长度为 0。浏览器无法在“零高度”里分配居中空间。
-
min-height: 100vh比height: 100vh更安全——内容超长时不会被截断 - 若父容器是
，必须同步设html, body { height: 100%; margin: 0; }，否则body高度仍为 auto - 嵌套结构中，检查中间层是否意外设置了
height: auto或漏了min-height -
align-content: center完全无关——它只在flex-wrap: wrap且有多行时起作用
子元素必须是 Flex 项目（不能脱离文档流）
justify-content 和 align-items 只对 Flex 容器的直接子元素生效，且该子元素不能是 position: absolute 或 fixed。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 绝对定位元素已脱离文档流，不再是 Flex 项目，属性对其完全无效
- 若 DOM 结构是
<div class="container"><div class="wrapper"><div class="box"></div></div></div>，则.box不受.container的align-items控制 - 需要逐层设置：中间的
.wrapper也得加display: flex、justify-content: center、align-items: center
主轴方向变化时，justify-content 和 align-items 的作用会互换
默认 flex-direction: row 时，justify-content 管水平，align-items 管垂直；一旦改成 column，角色就翻转。
-
flex-direction: column下，justify-content: center控制垂直居中，align-items: center才管水平居中 - 混用
margin: auto和justify-content可能冲突，尤其在 IE10–11 中margin: auto垂直方向不支持 - IE11 对
align-items: center渲染有轻微偏差（常差 1–2px），对<img>或带vertical-align的内联元素尤其明显
最容易被忽略的不是“怎么写”，而是“高度从哪来”——哪怕只漏掉一行 margin: 0 或一个 height: 100%，align-items: center 就会静默失效，既不报错也不提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
