必须显式添加d-flex使.col或.row成为flex容器，justify-content-center和align-items-center才生效；text-center对块级子元素无效，垂直居中还需父容器有明确高度（如min-vh-100）。
align-items-center 和 justify-content-center 不会自动生效——因为 Bootstrap 4 的 .col、.row 默认不是 Flex 容器，必须显式加 d-flex 才能触发这些类的作用。
为什么直接加 justify-content-center 没反应
常见错误是把 justify-content-center 加在 <div class="col"> 上，但 <code>.col 默认是 display: block，而该类只对 Flex 容器起作用。浏览器直接忽略它。
- 检查开发者工具里该元素的
display值，如果不是flex，说明d-flex没加对 -
text-center对块级子元素（如<div>、<code><button></button>）无效，别指望它替代 Flex 居中 - 嵌套
.col时，父列没加d-flex，子列即使加了也继承不到 Flex 上下文 - 必须加在子元素的**直接父容器**上，比如
<div class="col d-flex justify-content-center"> <li>如果父容器本身有 padding 或 border，记得确认是否用了 <code>box-sizing: border-box，否则实际宽度/高度会超出预期 - 响应式写法：用
justify-content-sm-center配合d-sm-flex，否则断点类不生效
水平居中：用 d-flex justify-content-center
这是最直接的方式，适用于按钮、卡片、表单等需要在行内居中的内容。
<div class="row">
<div class="col-12 col-md-6 d-flex justify-content-center">
<button class="btn btn-primary">居中按钮</button>
</div>
</div>
垂直居中：d-flex align-items-center + 明确高度
90% 的失败案例源于父容器没有可计算的高度参照系。Flex 的 align-items: center 不是“让子元素上下居中”，而是“在已有高度内居中”。
- 必须给父容器设
min-height或height，推荐min-vh-100（需 Bootstrap 4.5+）或手动加style="min-height: 100vh;" -
my-auto只在 Flex 容器中有效，且只作用于单个子元素；想整体居中，优先用align-items-center - 移动端 Safari 下
100vh会随地址栏隐藏/显示跳动，用min-vh-100更稳
<div class="d-flex align-items-center" style="min-height: 100vh;">
<div class="text-center">
<h2>垂直居中内容</h2>
</div>
</div>
同时水平+垂直居中：组合使用 + 注意主轴方向
默认 flex-direction: row，此时 justify-content 控制水平，align-items 控制垂直。不需要改方向就能实现二维居中。
- 不要误以为必须加
flex-column才能垂直居中——那是为了改变主轴，和居中无关 -
place-items-center是 Bootstrap 5.3+ 新增的 Grid 类，Bootstrap 4 不支持，别混用 - 如果内容是单个块级元素（如
<div class="card">），加 <code>mx-auto my-auto也能居中，但前提是父容器已是d-flex真正容易被忽略的点：高度链路断裂。哪怕写了
d-flex align-items-center，只要任意一级祖先没设高度（比如缺少min-height: 100vh），整个居中就失效——它只是在“内容撑开的那点高度”里居中，看起来还是贴顶。
