父容器必须是flex容器且显式设高度，align-items: center才有效；否则无参照系，子项按文档流堆叠。常见错误是漏设高度或误将该类加在子元素上。
父容器必须显式设高度且为 flex 容器
垂直对齐不是内容自己“动”，而是父容器用 align-items-center 控制子项在交叉轴上的位置。如果父容器没高度，align-items-center 就没参照系——子项会按默认文档流堆叠，看起来完全不居中。
常见错误是只加 d-flex align-items-center，却忘了给父容器设高：
-
h-100：适合嵌套在已有高度的容器内（比如栅格列） -
min-vh-100：全屏居中首选，兼容内容短/长两种情况 -
style="height: 300px;"：固定高度场景可用，但响应式下易断裂 - 千万别用
height: 100%，它依赖父级高度，链路一断就失效
别把 align-items-center 加在子元素上
这个类只对 flex 容器生效，加在子元素（比如 <div class="align-items-center">）上完全无效。很多人调试半天发现没反应，就是误用了作用对象。
<p>正确层级结构必须是：</p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<pre class="brush:php;toolbar:false;"><div class="d-flex align-items-center h-100">
<div>我要居中的内容</div>
</div></pre>
<p>注意点：</p>
<ul>
<li>子元素不能是 <code>position: absolute，否则脱离 flex 流，对齐失效
margin 或 padding，视觉居中可能偏移——建议用 h-100 撑满再对齐，而非靠内边距“凑”<p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill4914" title="VPS Bootstrap"><img
src="https://img.php.cn/upload/skill/000/000/081/179025304626966.jpg" alt="VPS Bootstrap" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill4914" title="VPS Bootstrap">VPS Bootstrap</a>
<p>从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。</p>
</div>
<a href="/xiazai/skill4914" title="VPS Bootstrap" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> 并列）仍适用 align-items-center；若要整体上下居中且子项自身也需对齐，优先考虑 justify-content-center + 高度控制表格单元格垂直对齐必须作用于 或
align-middle、align-top 这类工具类，浏览器原生 vertical-align 行为一样，只对表格单元格元素本身有效。加在 <tr> 或 <code><tbody> 上不会传递到子单元格。
<p>典型失效场景：</p>
<ul><li>写了 <code><tr class="align-middle"> —— 错，<code>tr 默认是 display: table-row，不识别 flex 类
单元格里包了一层 <div>，而该 <code>div 有 display: flex —— 错，对齐基准变成 div 内部，不再是单元格边界
用了 bootstrap-table 插件，它偷偷给 tr 加了 height，压制了 vertical-align 计算
稳妥写法始终是：<td class="align-middle">内容</td>
模态框垂直居中别只靠 modal-dialog-centered
modal-dialog-centered 确实能触发 transform 居中，但它依赖两个前提：父容器 .modal 是 flex 布局，且已设 align-items: center。Bootstrap 5 默认已满足，但如果你覆盖了 .modal 的 display，或动态插入后未触发重排，就会失效。
更隐蔽的问题：
- 内容过高时，
modal-dialog-centered 会让对话框顶部顶到视口边缘，而不是滚动——得配合 modal-dialog-scrollable
- 移动端 Safari 对
transform 渲染不稳定，窗口 resize 后可能偏移，需监听事件手动重置
- 如果模态框是 JS 动态创建（比如
new bootstrap.Modal(...)），必须确保 DOM 已挂载完成再调用 show()，否则 flex 容器高度计算为 0
真正“完美”的垂直居中，不是靠一个类，而是整条链路可控：容器高度 → flex 触发 → 对齐生效 → 内容适配。
align-middle、align-top 这类工具类，浏览器原生 vertical-align 行为一样，只对表格单元格元素本身有效。加在 <tr> 或 <code><tbody> 上不会传递到子单元格。
<p>典型失效场景：</p>
<ul><li>写了 <code><tr class="align-middle"> —— 错，<code>tr 默认是 display: table-row，不识别 flex 类
<div>，而该 <code>div 有 display: flex —— 错，对齐基准变成 div 内部，不再是单元格边界
bootstrap-table 插件，它偷偷给 tr 加了 height，压制了 vertical-align 计算稳妥写法始终是：<td class="align-middle">内容</td>
模态框垂直居中别只靠 modal-dialog-centered
modal-dialog-centered 确实能触发 transform 居中，但它依赖两个前提：父容器 .modal 是 flex 布局，且已设 align-items: center。Bootstrap 5 默认已满足，但如果你覆盖了 .modal 的 display，或动态插入后未触发重排，就会失效。
更隐蔽的问题：
- 内容过高时，
modal-dialog-centered会让对话框顶部顶到视口边缘，而不是滚动——得配合modal-dialog-scrollable - 移动端 Safari 对
transform渲染不稳定，窗口 resize 后可能偏移，需监听事件手动重置 - 如果模态框是 JS 动态创建（比如
new bootstrap.Modal(...)），必须确保 DOM 已挂载完成再调用show()，否则 flex 容器高度计算为 0
真正“完美”的垂直居中，不是靠一个类，而是整条链路可控：容器高度 → flex 触发 → 对齐生效 → 内容适配。
