Bootstrap框架里的水平居中与垂直居中 Bootstrap居中方法汇总优缺点

最常用图片水平居中方式是mx-auto d-block，仅适用于块级元素；通用双轴居中用d-flex justify-content-center align-items-center，需父容器有明确高度；背景图居中必须用background-position: center center；表格单元格需text-center配合align-middle或d-flex实现双轴居中。

用 mx-auto d-block 实现图片水平居中最常用，但仅限块级元素

这是 Bootstrap 里最轻量、最直接的水平居中方式，适用于单张图片、按钮、卡片等独立块元素。它本质是设置 margin-left: auto; margin-right: auto;，配合 d-block 让图片脱离行内流，获得左右自动外边距生效的前提。

常见错误包括：
– 忘记加 d-block，图片仍是 inline，mx-auto 完全无效；
– 在 Flex 或 Grid 容器里重复使用 mx-auto，反而干扰主轴对齐逻辑；
– 用于多图并排时误以为能“整体居中”，实际每张图各自居中，可能造成视觉错位。

适用场景：响应式 banner 图、登录页 logo、卡片内单图展示。不推荐用于需要垂直对齐或动态高度容器中的图片。

用 d-flex justify-content-center align-items-center 居中任意内容，但父容器必须有明确高度

这是 Bootstrap 5 中最通用的双轴居中方案，适合 <section>、<div> 甚至整个页面区域。关键不是类本身，而是它们生效的条件：父容器需有可计算的高度基准，否则 align-items-center（垂直居中）会失效。

必须注意：
– 不要用 height: 100vh，滚动条宽度会导致视口高度计算偏小，推荐 min-vh-100；
– 如果父容器是 <div class="row">，它默认已是 display: flex，但它的父级（比如 <div class="container">）仍需 min-vh-100 或显式 height；
– 子元素若设了 position: absolute，会脱离 Flex 流，justify-content 和 align-items 对其无效。

示例结构：

<section class="d-flex justify-content-center align-items-center min-vh-100">  <div>我要居中的内容</div></section>

背景图居中必须写 background-position: center center，单个 center 是陷阱

很多人写 background-position: center，以为能同时居中，结果图片被钉在顶部——因为 CSS 规范里单值 center 只作用于水平方向，垂直方向默认是 top。真正起效的是双值写法。

搭配要点：
– 必须和 background-size 协同：用 cover 保证填满且不失真，用 contain 保证全图可见；
– 若容器高度由内容撑开（如空 div），background-position: center center 也无意义，得先用 min-height: 100vh 或固定高提供参照；
– Bootstrap 的 text-center、mx-auto 对背景图完全无效，别混用。

正确写法：

<div class="bg-image" style="background-image: url('...'); background-position: center center; background-size: cover; min-height: 100vh;"></div>

表格单元格内容居中要分水平和垂直，text-center 不解决垂直问题

text-center 类加在 <th> 或 <td> 上，只能让文字/内联内容水平居中。垂直居中需要额外包裹或改写容器行为。

可靠做法：
– 固定行高时：给 <td> 加 class="align-middle"（Bootstrap 5 内置类，等价于 vertical-align: middle）；
– 行高不固定或含复杂内容（如按钮、图片）时：用 <div class="d-flex align-items-center h-100"> 包裹内容，并确保 <td> 本身有高度（如 style="height: 60px;"）；
– 别对 <tr> 直接加 d-flex，表格行的 display 是 table-row，Flex 类不会覆盖它。

注意：align-middle 在 IE11 中支持有限，如需兼容旧浏览器，仍建议用 line-height + text-center 组合处理单行文本。

实际项目里最容易忽略的，是「居中参照系」这个前提——无论用哪种方式，只要父容器高度塌陷、或定位上下文缺失、或 display 模式冲突，居中就会静默失败。调试时优先检查 computed height 和 display 值，比反复换类更省时间。