用flex实现动态高度元素垂直居中：父容器设display: flex和align-items: center，子元素自动居中；需确保父容器有明确高度（如min-height: 100vh），且flex属性必须作用于父容器而非子元素。
用 flex 实现动态高度元素垂直居中
直接给父容器加 display: flex + align-items: center，子元素无论内容多少、高度怎么变，都能自动垂直居中。这是目前最可靠、浏览器兼容性最好的方式（IE10+ 支持）。
常见错误是只加了 justify-content: center（水平居中），漏掉 align-items；或者把 flex 属性写在子元素上——flex 布局必须作用于父容器。
- 父元素需有明确高度（比如
height: 100vh或min-height: 100vh），否则 flex 的垂直居中无参照基准 - 子元素无需设
margin: auto，flex 下它不生效 - 如果父容器是
body，记得先清除默认margin和设置min-height: 100vh
用 grid 实现单个动态高度元素居中
父容器设 display: grid + place-items: center，一行代码搞定居中。适用于现代项目（Chrome 60+/Firefox 63+/Safari 11.1+），但不支持 IE。
注意 place-items 是 justify-items 和 align-items 的简写，只对 grid 子项起作用；若子元素是多个，且需要分别控制，就得拆开写。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 父容器同样需要有可计算的高度（
height或min-height） - 子元素不能设
align-self: stretch或固定height，否则会撑满容器、掩盖居中效果 - 如果子元素内含
textarea或图片加载后高度变化，grid 会自动重排，无需额外监听
避免用绝对定位 + transform 的老方案
虽然 position: absolute; top: 50%; transform: translateY(-50%) 看似能居中，但它对动态高度元素很脆弱：一旦子元素高度在 JS 中被修改（比如展开折叠、字体加载完成、图片懒加载完毕），就容易偏移或抖动。
更麻烦的是，这种写法要求父容器必须是 position: relative，且子元素脱离文档流，可能影响兄弟元素布局或导致滚动条异常。
- transform 的百分比基于自身尺寸，不是父容器，所以
translateY(-50%)只在初始渲染时准确 - 配合
resize或load事件手动重算 top 值，代码冗余、易出错 - SSR 渲染时，服务端无法执行 JS，首次渲染位置可能错乱
响应式场景下要注意 min-height 和 viewport 单位
动态高度元素常出现在模态框、卡片、登录表单等区域，这些容器往往要适配移动端。此时用 min-height: 100vh 比 height: 100vh 更安全——避免内容超长时被截断。
iOS Safari 对 100vh 的处理有 bug（地址栏收起/展开时高度跳变），用 min-height: 100% 并确保祖先链都有高度，或用 JS 注入 --vh 变量补救，但大多数情况 min-height: 100vh 已够用。
- 不要在 flex/grid 容器上同时设
height和min-height，后者可能被忽略 - 如果父容器是
html或body，务必确认它们没有overflow: hidden，否则居中内容可能被裁剪 - 使用
vh单位时，测试真机（尤其是 iOS）的视口变化行为，比模拟器更真实
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
