加了 align-items: center 没反应是因为父容器未设 display: flex 且缺乏明确高度（如 min-height: 100vh），Bootstrap 栅格默认非 flex 容器，需显式添加 d-flex 等工具类并确保高度上下文有效。
用 flex 做垂直居中，为什么加了 align-items: center 没反应？
因为父容器没设 display: flex，或者高度没撑开。Bootstrap 的栅格（比如 .row、.col）默认不是 flex 容器，也不会自动占满剩余高度。
- 必须显式给父元素加
display: flex或display: inline-flex - 父元素得有明确高度（如
min-height: 100vh、height: 400px），否则align-items: center无参照基准 - Bootstrap 5 默认启用了 flexbox 栅格，但
.container和.row仍是块级元素，不自动变 flex
Bootstrap 5 中最省事的垂直居中写法
直接复用 Bootstrap 内置的 flex 工具类，比手写 CSS 更稳，也避免和框架样式冲突。
- 给父容器加
class="d-flex align-items-center justify-content-center"：同时实现垂直+水平居中 - 若只要垂直居中（水平保持左对齐），去掉
justify-content-center，保留d-flex align-items-center - 注意：这些类只对直接子元素生效；如果中间嵌套了非 flex 容器（比如一个
div没加d-flex），就会断掉 - 在响应式场景下，可用
align-items-sm-center等断点类做差异化控制
min-height: 100vh 和 height: 100vh 选哪个？
优先用 min-height: 100vh。真实页面内容经常比视口高，用 height 会截断或溢出，而 min-height 保证至少一屏，内容多时还能自然延展。
-
min-height: 100vh是安全选择，尤其搭配align-items: center时不会压扁内容 - 如果父容器是
.vh-100（Bootstrap 5 提供的全高类），它等价于height: 100vh，慎用于不确定内容高度的场景 - 移动端 Safari 对
vh有兼容问题（地址栏收放导致视口高度变化），必要时可改用100dvh（现代浏览器支持更好）
为什么用 justify-content-center 水平居中后，文字换行错位？
因为 justify-content-center 作用于 flex 主轴（默认是水平轴），它会让所有子项整体居中，但子项内部文本仍按默认 text-align: left 渲染——所以多行文本看起来“偏左”。
- 解决方法很简单：给需要居中的文字容器额外加
text-center（Bootstrap 类）或style="text-align: center" - 如果子项是按钮、卡片等块级元素，通常没问题；但如果是
p、span这类内联内容，就得补文本对齐 - 别试图靠
margin: auto在 flex 里强行调文字——它只对块级子元素有效，且逻辑容易绕晕
实际最容易被忽略的是：**flex 居中依赖父容器的高度上下文，而这个高度常常被 margin 折叠、浮动残留或未闭合标签悄悄吃掉**。调试时先检查父元素是否真有高度（DevTools 里看 computed height），再动 flex 属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
