flex-column 不能直接垂直居中文本，因为仅改变主轴方向，需配合 justify-content: center（垂直居中）和 align-items: center（水平居中），且容器须有明确高度。
flex-column 为什么不能直接让文本垂直居中
因为 flex-column 只是把主轴变成垂直方向，但默认的 justify-content 仍是 flex-start —— 文本还是贴顶对齐。很多人卡在这儿，以为加了 flex-column 就完事了。
- 必须显式设置
justify-content: center（在 flex 容器上）才能垂直居中子元素 - 如果子元素是单行文本，且父容器有明确高度，
align-items: center能水平居中，但不负责垂直 - Bootstrap 5 的
.d-flex.flex-column类本身不含justify-content，得自己补
Bootstrap 5 中最简可行写法
不用自定义 CSS，靠内置工具类组合：
<div class="d-flex flex-column justify-content-center align-items-center" style="height: 200px;"> <p class="mb-0">我要居中</p> </div>
-
justify-content-center管垂直居中（主轴为 column 时生效） -
align-items-center管水平居中（交叉轴） -
mb-0是为了去掉<p></p>默认的下边距，避免视觉偏移 - 容器必须有明确高度（如
style="height: 200px"），否则 flex 无法计算居中位置
遇到文字被截断或撑开容器怎么办
常见于响应式场景：父容器高度随屏幕变小，而文本行高/字体大小没适配，导致换行或溢出。
- 用
text-truncate配合white-space: nowrap控制单行（需额外加class="text-truncate"和内联style="white-space: nowrap"） - 多行文本垂直居中，别用 flex-column + justify，改用
d-flex align-items-center+ 单行容器（更稳） - 如果用了
min-vh-100这类响应式高度类，注意它可能在小屏下过高，导致“居中”看起来像偏下——实际是居中了，只是容器太高
IE11 兼容性坑点（如果还不得不支持）
IE11 对 flex-column 的 justify-content 支持不稳定，尤其嵌套或含 min-height 时容易失效。
- 优先用
d-flex align-items-center justify-content-center+flex-row（默认主轴水平），再配合flex-column内部翻转，反而更可靠 - 避免在 IE11 中依赖
flex-column的justify-content垂直居中，可降级为line-height == height单行方案 - Bootstrap 4.6+ 的
.d-flex在 IE11 下需要display: -ms-flexbox，确保未被 CSS 压缩工具误删
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
