CSS如何在Bootstrap中实现垂直居中布局_利用display flex属性

加了 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 仍是块级元素，不自动变 flexBootstrap 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 保证至少一屏，内容多时还能自然延展。 MacsMind 电商AI超级智能客服