justify-content: center只控制主轴（默认水平）对齐，垂直居中必须配合align-items: center（控制交叉轴，默认垂直），且二者须作用于启用display: flex的父容器，并确保父容器有明确高度（如min-height: 100vh）。
justify-content: center只管水平方向，垂直居中必须配align-items
很多人写了 justify-content: center 发现图片还是贴顶，根本原因是它只控制主轴（默认是水平轴），对垂直位置完全没影响。要真正“居中”，必须同时加 align-items: center——它才负责交叉轴（默认是垂直轴）的对齐。
这两个声明必须写在**父容器**上，不是 <img> 自身；而且只有当父容器启用了 display: flex 时，它们才生效。
-
justify-content: center对应水平居中，align-items: center对应垂直居中，缺一不可 - 如果只想要水平居中（比如图文混排时文字在左、图在右居中），可以只用
justify-content，但别指望它拉高图片 - 旧 Android（4.4 及以下）需补
display: -webkit-flex和对应前缀，否则整套失效
父容器高度塌陷是justify-content失效的最常见原因
align-items: center 需要一个可计算的交叉轴尺寸才能工作。如果父容器高度是 auto 或未设任何高度约束，浏览器就认为“垂直空间为 0”，图片自然贴顶。
正确做法是给父容器明确的高度上下文：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 视口级居中：用
height: 100vh（严格占满一屏）或更安全的min-height: 100vh（允许内容撑高） - 内容区居中：用
min-height: 400px这类固定值，避免小图下留大片空白 - 别直接在
<body>上设display: flex——它会让所有直系子元素（如多个<p>）都变成 flex item，破坏原有文档流
图片自身尺寸失控会破坏justify-content的居中效果
即使容器 flex 正确、高度明确，如果图片宽高没约束，它可能溢出、拉伸、甚至把容器撑变形，导致视觉上“偏了”。
关键控制点有三个，必须一起写：
-
max-width: 90vw（留边距，避免宽屏下顶到边缘） -
max-height: 80vh（防大图撑高容器） -
width: auto; height: auto（让浏览器按原始比例缩放，不强制拉伸） - 错误写法：
width: 100%—— 它会无视原始比例强行拉宽，破坏响应性
嵌套容器里justify-content容易被中间层覆盖
在多层 <div> 嵌套中，只要某一层用了 float、position: absolute、display: grid 或 display: inline-flex，就会打断 flex 继承链，导致内层 justify-content 失效。
典型翻车现场：
- 图片突然飘到左上角 → 中间某层加了
position: relative，而图片被误加position: absolute - 水平居中了但垂直仍贴顶 → 中间容器高度为
auto且无内容撑开，没传高度下去 - 多张图片堆叠错位 → 某个包裹层用了
display: grid，覆盖了外层 flex 行为 - 解决办法：保持图片始终是普通子元素，不加
float、不加position、不手动设margin，所有对齐逻辑交给最外层 flex 容器
真正卡住人的地方往往不是语法写错，而是某一层容器悄悄“截胡”了 flex 上下文，或者高度没传下来——调试时优先检查父容器是否真的渲染出了高度，以及中间有没有脱离文档流的样式干扰。
