bootstrap卡片内文字及子元素水平垂直居中需对.card-body应用d-flex、justify-content-center和align-items-center，且容器须有固定高度；直接在子元素加text-center或justify-content无效。
Bootstrap卡片内文字水平垂直居中
直接加 text-center 只能居中文字，对图片、按钮等块级子元素无效；真正要让整个 .card-body 内容（包括多行文本、按钮、图标）在卡片里居中，得靠 Flex 布局控制容器本身。
-
.card-body默认是普通块级流，不自动居中子元素 - 给
.card-body加display: flex+justify-content: center+align-items: center才能同时水平垂直居中 - 如果卡片高度固定（比如设了
min-height或height），这组组合才生效；否则可能看不出垂直居中效果
为什么justify-content:center没反应？
常见原因是父容器没启用 Flex，或者被其他样式覆盖。Bootstrap 5 的 .card 本身不是 Flex 容器，.card-body 也不是 —— 所以直接在子元素上写 justify-content 没用，它只对 Flex 容器的直接子元素起作用。
- 必须先给目标容器（如
.card-body）加display: flex - 检查是否被 Bootstrap 其他 utility 类干扰，比如
d-block或d-grid覆盖了d-flex - Chrome DevTools 里看 computed styles，确认
display确实是flex，且justify-content没被!important覆盖
一行代码搞定：用Bootstrap内置工具类
Bootstrap 5 提供了开箱即用的 Flex 工具类，比手写 CSS 更可靠，也避免自定义样式冲突。
- 给
.card-body同时加上：d-flex justify-content-center align-items-center - 如果内容是单行文本，
text-center+h-100 d-flex align-items-center更轻量 - 注意：不要对
.card本身加justify-content-center，它不是 Flex 容器，该属性会被忽略
<div class="card">
<div class="card-body d-flex justify-content-center align-items-center">
<p>居中内容</p>
</div>
</div>
响应式居中时容易漏掉的点
在小屏下强行垂直居中可能导致文字被截断，尤其当卡片高度由内容撑开时 —— 此时 align-items: center 实际会让内容“悬浮”在中间，但容器没高度，就等于没效果。
- 移动端建议优先用
text-center+py-4这类 padding 控制视觉居中，更稳妥 - 如果必须 Flex 居中，配合
min-height: 100vh或h-100确保容器有高度 - 卡片内嵌
.row/.col时，Flex 居中会失效，因为 Grid 和 Flex 混用需额外协调
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
