vertical-align 对块级元素无效，仅适用于行内级元素和表格单元格；让 div 垂直居中应使用 Flexbox（display: flex + align-items: center）、Grid（display: grid + place-items: center）或绝对定位+transform。
vertical-align 对块级标签（如 div、p、section）完全无效——这不是你写错了，是它压根就不支持。
为什么 vertical-align 在 div 上没反应
因为 vertical-align 只作用于两类元素：
• 行内级元素（span、img、label 等）
• 表格单元格（td、th）或 display: table-cell 元素
块级元素默认是 display: block，既不参与行内布局，也不属于表格上下文，所以设了 vertical-align: middle 也等于没写。
让 div 垂直居中的三种可靠方式
现代项目中，优先按以下顺序选：
-
Flexbox（推荐）：父容器加
display: flex+align-items: center，子div自动垂直居中，无需固定高宽，兼容性到 IE10+ -
Grid（更简洁）：父容器设
display: grid+place-items: center，一行搞定水平+垂直居中 -
绝对定位 + transform：子
div设position: absolute，再配top: 50%+transform: translateY(-50%)；注意父容器需有position: relative
别用 margin: auto 垂直居中——它只对水平方向生效，垂直方向上除非是 flex/grid 子项，否则不起作用。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
display: inline-block + vertical-align 的陷阱
有人会把 div 改成 display: inline-block，再加 vertical-align: middle，看似“绕过”了限制，但实际埋了坑：
- 父容器必须清除行内基线对齐（比如加
font-size: 0或line-height: 0），否则底部仍有空白 -
vertical-align: middle是相对于整行的行高计算中点，不是相对于父容器高度——如果父容器没设height或line-height，结果不可控 - 多个
inline-block元素之间会因 HTML 换行产生空格间隙，需要额外处理
这种方案只适合极简场景（比如几个图标并排对齐），不适合真正意义上的“块级容器垂直居中”。
真正要让一个 div 在父容器里垂直居中，关键不是找 vertical-align 的变通法，而是换布局模型——flex 和 grid 不是“高级技巧”，它们就是当前解决这个问题的标准答案。容易被忽略的是：父容器是否设置了明确的高度约束，或者是否允许子元素撑开它；没有这个前提，连 align-items: center 都可能看起来“没效果”。
