vertical-align 仅对行内元素、表格单元格和替换元素生效，适用于文本旁图标对齐和表格内容垂直居中；不可用于div或flex容器居中，多行块级内容居中应选用Flexbox或Grid方案。
vertical-align 适合哪些场景？
vertical-align 只对三类元素生效：行内元素（如 <span></span>、<img alt="HTML元素垂直居中用哪个属性好？不同场景属性推荐" >）、表格单元格（<td>、<code><th>）和替换元素（如 <code><input>、<textarea></textarea>）。它不是万能居中工具，而是基线对齐机制的体现。
常见误用：给 div 或 flex 容器设 vertical-align: middle —— 完全无效，因为这些不是行内级或表格单元格。
- ✅ 文本旁图标对齐：
img { vertical-align: middle; }可让图标与文字中部对齐（注意：需确保父容器是行内上下文，比如line-height稳定） - ✅ 表格内容垂直居中：
td { vertical-align: middle; }是标准且兼容性极佳的做法 - ❌ 多行文本块居中、卡片内容居中、模态框居中——别用它，会失效或行为不可控
Flexbox 的 align-items: center 为什么更可靠？
当你要让子元素在父容器内真正“垂直居中”，align-items: center 是现代布局的首选，但前提是父容器必须是 display: flex 或 display: inline-flex，且自身有明确的交叉轴空间（即高度可测量）。
典型失效原因：#login-form { display: flex; align-items: center; } 却没居中，往往是因为该容器本身高度只有 auto（仅包裹内容），没有“可对齐的空间”。
立即学习“前端免费学习笔记（深入）”；
- ✅ 父容器加
min-height: 100vh或height: 60px后，align-items: center才能起效 - ✅ 在 Bootstrap 的
.row上用align-items-center类时，必须同步给.row或其父级加vh-100或h-100，否则对齐无空间可言 - ❌ 不要把它和
vertical-align混用——两者作用域完全不同，混用只会增加调试负担
Grid 布局中用 place-items: center 更简洁
对于单个子元素的垂直+水平居中，place-items: center 是 Grid 最简方案，等价于 justify-items: center; align-items: center;。但它只在 display: grid 容器下有效，且要求容器有可计算的高度。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
比 Flexbox 少一个维度顾虑（Grid 默认二维），但对老浏览器支持弱于 Flexbox（IE 完全不支持）。
- ✅ 卡片、登录框、弹窗等固定尺寸容器内居中，代码最干净：
section { display: grid; place-items: center; min-height: 100vh; } - ✅ 配合
grid-template-areas做复杂布局时，仍可单独控制某区域内的内容居中 - ❌ 不要试图在
inline-grid或高度为auto的容器里用它——同样会因无空间而“看起来没效果”
为什么 text-align: center 和 vertical-align 经常一起出现？
这是实现“行内元素整体居中 + 内部细节对齐”的经典组合，比如导航栏中 logo 左对齐、菜单右对齐、整体在 header 中垂直居中。
关键在于两层结构：text-align: center 作用于块级父容器，让其中的 inline-block 子元素水平居中；而每个 inline-block 内部再用 vertical-align: middle 调整图文相对位置。
- ✅ 示例：
.nav-container { text-align: center; }+.logo, .menu { display: inline-block; vertical-align: middle; } - ✅ 这种写法在老项目或需要兼容 IE9+ 的场景仍有实用价值
- ❌ 别指望靠它让多行块级内容垂直居中——它只管行内流中的基线偏移，不控制容器高度分配
真正容易被忽略的点是：所有垂直居中方案都依赖“父容器存在可度量的垂直空间”。没有高度（或最小高度），align-items、place-items、甚至 vertical-align 的 middle 都只是在空转。调试前先检查父容器的 height 或 min-height 是否合理，比反复调参数更省时间。
