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

加了 align-items: center 没反应是因为父容器未设 display: flex 且缺乏明确高度如 min-height: 100vhBootstrap 栅格默认非 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 更稳也避免和框架样式冲突。给父容器加 classd-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超级智能客服