text-center在flex容器中无效，因其仅控制内联内容的text-align，而flex子项对齐需用justify-content和align-items；需父容器设d-flex justify-content-center、子项加text-center才能实现子项居中且内部文字居中。
text-center类在flex容器里没用，因为它是text-align，不是justify-content
Bootstrap 的 text-center 类本质是设置 text-align: center，只影响**内联内容（如文字、span）在其块级父容器内的水平对齐**。而 Flex 容器的子元素默认是块级 flex 项目，它们的对齐由 justify-content（主轴）和 align-items（交叉轴）控制。text-center 对这些子元素本身不起作用。
常见错误现象：
- 给
<div class="d-flex"><p class="text-center">Hello</p></div>加text-center，但p依然靠左——因为p是 flex 项目，它的位置由父容器的justify-content决定，不是自己的text-align - 误以为
text-center能让整个 flex 子项居中，结果只是子项内部文字居中（如果子项是div且没设宽度，text-align甚至不可见）
想让 flex 子项里的文字居中，得两步走
Flex 容器控制子项位置，子项自己控制内部文字对齐。两者不冲突，但必须分开处理。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 若子项是
<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>、<h1></h1>等文本容器，且你希望它在 flex 中水平居中 + 内部文字也居中：父容器加d-flex justify-content-center，子项加text-center - 若子项是按钮或卡片等块级组件，通常只需
justify-content-center即可；加text-center是多余的，除非它内部还有未包裹的纯文本 - 避免在 flex 子项上滥用
margin: auto来“模拟居中”——它可能意外覆盖 flex 对齐逻辑，尤其在响应式断点切换时行为难预测
align-items-center 没反应？先查父容器高度和 display
align-items-center 是垂直居中，但它需要两个前提：父容器是 flex 容器（display: flex 或 display: inline-flex），且该容器有明确的**可用高度**。Bootstrap 的 .row 默认不是 flex 容器（Bootstrap 5 栅格虽基于 flex，但 .row 本身仍需显式加 d-flex 才激活）。
容易踩的坑：
- 只加
align-items-center，没加d-flex—— 类名不会生效，浏览器忽略 - 父容器高度塌陷：比如
min-height: 100vh被 margin 折叠吃掉，或父级用了float未清除，导致实际计算高度为 0 - 移动端 Safari 下
100vh不稳定（地址栏收放触发视口重算），改用100dvh更可靠（现代浏览器支持，vh-100类不等价于它） -
align-items只对直接子元素生效；中间插一个没加d-flex的<div>，就断链了 <h3>响应式场景下别硬写 media query，优先用 Bootstrap 断点类</h3> <p>Bootstrap 提供了带断点前缀的 flex 工具类，比如 <code>align-items-sm-center、justify-content-lg-between。它们比手写 CSS 更轻量，也更少与框架样式冲突。使用注意：
- 断点类只在对应尺寸及以上生效（
sm表示 ≥576px），不自动向下兼容 - 不要混用多个断点类试图“覆盖”，比如同时加
justify-content-center justify-content-md-start——后者会覆盖前者，但逻辑易错 - 如果某列在小屏要顶部对齐、大屏要居中，直接写
align-items-start align-items-lg-center即可，无需额外 wrapper
最常被忽略的一点：flex 居中不是“开个开关就成”，它依赖整个高度链的完整性。哪怕父容器加了
min-height: 100vh，只要上层某个祖先元素有overflow: hidden或未闭合的浮动，都可能导致高度计算异常。调试时优先检查 computed height，而不是反复改 class。 - 断点类只在对应尺寸及以上生效（
