line-height等于容器height可实现单行文字垂直居中，但仅适用于定高且不换行场景；vertical-align对块级元素无效，flex和绝对定位+transform是更通用的替代方案。
单行文字用 line-height 最快，但必须定高且不换行
容器高度已知、内容确定为单行时，line-height 等于容器 height 是最轻量的方案。它本质是拉伸行框高度，让基线居中，不是真正“移动文字”。
常见错误：给 div 设了 height: 100px 却忘了设 line-height: 100px；或加了 white-space: pre-wrap 导致换行，line-height 失效。
- 必须同时设置
height和line-height，且值相等 - 父容器不能是
height: auto或由内容撑开 -
vertical-align在这里无效，别乱加 - 字体缩放（如用户设置系统字号放大）可能破坏对齐，响应式场景慎用
块级元素优先用 display: flex + align-items
现代项目里，display: flex 是唯一能同时处理不定高、多行、图片、空 div 的通用解法。只要父容器有明确高度（哪怕来自 vh 或 min-height），子元素无需任何尺寸声明就能垂直居中。
容易踩的坑：IE11 支持基本 flex，但若父容器用了 min-height 且子元素又设置了 flex: 1，某些旧版本会计算失败；另外，height: 100% 在没给祖先链设高度时等于 0，结果就是“看不见”。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 父容器必须有可计算的高度，
height: 100%要确保所有父级都设了高度 - 子元素如果是
span这类 inline 元素，先加display: block再居中，否则可能意外换行 -
align-items: center只影响交叉轴（默认是垂直方向），别和justify-content搞混
需要兼容 IE9/10？用 position: absolute + transform
这个组合至今仍可靠，关键是 transform: translate(-50%, -50%) 必须和 top: 50%、left: 50% 配套使用。漏掉 transform，元素左上角会卡在容器中心点，而不是整体居中。
它不依赖子元素宽高，适合弹窗、加载图标这类脱离文档流的场景。但频繁重排（比如动画中反复修改宽高）会影响性能，Safari 旧版对 bottom: 0 计算也有异常。
- 父容器必须设
position: relative - 子元素设
position: absolute; top: 50%; left: 50%，再加transform: translate(-50%, -50%) - 不要和
margin: auto混用——绝对定位下后者只在四边偏移全设且宽高固定时才生效 - Android WebView 4.3 及以下需加
-webkit-transform前缀
vertical-align 不适用于块级元素，别试了
vertical-align 只对 inline、inline-block、table-cell 元素有效。很多人给 div 加 vertical-align: middle 发现没反应，是因为它根本不起作用——块级元素不在行内格式化上下文中。
真要用 vertical-align，得先把块级元素转成 display: table-cell，再配 vertical-align: middle 和 text-align: center。但这会带来额外的表格渲染行为，比如自动撑宽、换行逻辑变化，日常开发中极少值得这么折腾。
-
vertical-align对div、p、section这类纯块级元素完全无效 - 即使加了
display: inline-block，也要注意父容器的font-size: 0或空白符可能引入间隙 - 表格单元格（
td）天然支持vertical-align，这是它最该用的地方
line-height 快但只认单行；绝对定位稳但要小心重排。最常被忽略的是父容器高度来源：没有高度，再好的居中也落空。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
