Bootstrap 4：如何在.container-fluid的列中垂直水平居中内容？

嘿，我来帮你捋清楚这个问题～首先得说清楚为啥mx-auto没生效：

mx-auto这个类的作用是让块级元素水平居中，但它有两个关键前提：一是这个元素得有固定宽度或者最大宽度（不然它会占满父容器宽度，自然不需要居中）；二是它的父元素不能是flex容器（如果父元素是flex，mx-auto会变成“把元素推到右侧”，而不是居中）。而且更重要的是，mx-auto本来就管不了垂直方向的居中，这也是它满足不了你需求的核心原因。

下面给你几个Bootstrap 4原生的解决方案，不用写太多额外CSS：

方案1：Flex工具类（最推荐，Bootstrap原生支持） #

Bootstrap 4本身就是基于Flex布局的，直接给你的列（比如col-*）加上这几个类就行：

• d-flex：把列变成Flex容器
• justify-content-center：让内容水平居中
• align-items-center：让内容垂直居中
• 如果需要列占满整个容器的高度，记得给.container-fluid、.row还有列本身都加上h-100，同时html和body也要设置height:100%（不然高度没法继承）

完整示例代码：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
</head>
<body class="h-100">
  <div class="container-fluid h-100">
    <div class="row h-100">
      <div class="col d-flex justify-content-center align-items-center">
        <div>我是垂直+水平居中的内容😎</div>
      </div>
    </div>
  </div>
</body>
</html>

方案2：Grid布局工具类（适合复杂场景） #

如果Flex的方式不符合你的布局需求，也可以用Bootstrap的Grid相关类，给列加上d-grid和place-items-center，同样要注意高度的设置：

<div class="container-fluid h-100">
  <div class="row h-100">
    <div class="col d-grid place-items-center h-100">
      <div>我也能垂直水平居中</div>
    </div>
  </div>
</div>

方案3：自定义CSS（当工具类不够用的时候） #

要是上面的原生工具类都满足不了你的特殊布局，也可以写自定义样式，用绝对定位的方式实现：

/* 给列加相对定位 */
.center-col {
  position: relative;
  height: 100%;
}
/* 给要居中的内容加绝对定位 */
.center-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

然后在HTML里引用：

<div class="container-fluid h-100">
  <div class="row h-100">
    <div class="col center-col">
      <div class="center-content">自定义样式实现的居中</div>
    </div>
  </div>
</div>

最后提醒你一个关键点：垂直居中的前提是父容器必须有明确的高度，不然浏览器不知道“垂直方向的中间”在哪里，所以一定要确保.container-fluid、.row和列都有高度（比如用h-100或者自定义height）。

内容的提问来源于stack exchange，提问作者hemoglobin