Bootstrap 4：Flex子元素内容居中（覆盖父容器）及图片底部居中问题

问题1：如何让Flex子元素覆盖父容器的justify-content样式？ #

其实在Bootstrap 4的flex布局里，justify-content是作用在flex容器上的属性，用来控制容器内子元素的对齐方式。如果想让某个子元素“突破”父容器的对齐规则，有两种实用的思路：

• 如果是让子元素自身内部的内容居中：给这个子元素加上d-flex justify-content-center类。这样子元素自己就变成了一个flex容器，它内部的内容会按照自己的justify-content规则对齐，完全不受父容器的影响。
  举个例子：

  <div class="d-flex justify-content-start"> <!-- 父容器左对齐 -->
    <div class="d-flex justify-content-center bg-light p-3">
      我是子元素，我内部的内容会居中
    </div>
  </div>
  

• 如果是让子元素在父容器的水平方向上居中：直接给子元素加mx-auto类就行。这是利用了flex布局的特性——margin:auto会自动填充元素左右的剩余空间，强制让元素在父容器中水平居中，不管父容器设置了justify-content-start还是其他值。
  例子：

  <div class="d-flex justify-content-start border p-3"> <!-- 父容器左对齐 -->
    <div class="bg-light p-3 mx-auto">我是子元素，我在父容器里居中了</div>
  </div>
  

问题2：如何让图片固定在主div的底部中间？ #

你提到的图片无法居中的问题，大概率是没用到Bootstrap 4自带的定位或flex工具类。这里有两种简单靠谱的方法，你可以根据自己的场景选：

方法1：用定位实现（适合主div已有内容，不需要flex布局的情况） #

给主div加上position-relative（让它成为定位参考），然后给图片加上position-absolute bottom-0 left-50 translate-middle-x：

• bottom-0让图片贴紧容器底部
• left-50把图片的左边缘移到容器水平中点
• translate-middle-x会把图片向左移动自身宽度的50%，刚好让图片中心对齐容器中点

完整代码示例：

<!doctype html>
<html lang="en">
<head>
  <title>Hello, world!</title>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <style>
    /* 给主div设置一个高度，方便看到效果，你可以换成自己需要的高度 */
    .main-div {
      min-height: 500px;
      border: 1px solid #ddd;
    }
  </style>
</head>
<body>
  <div class="main-div position-relative">
    <!-- 这里可以放主div的其他内容 -->
    <p>我是主div里的其他内容</p>
    <!-- 底部居中的图片 -->
    <img src="your-image-path.jpg" class="position-absolute bottom-0 left-50 translate-middle-x" alt="底部居中图片">
  </div>

  <!-- Optional JavaScript -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

方法2：用Flex布局实现（更简洁，适合主div是空白或需要flex布局的场景） #

给主div加上d-flex flex-column justify-content-end align-items-center：

• d-flex flex-column把主div变成垂直方向的flex容器
• justify-content-end让容器内的元素靠底部对齐
• align-items-center让元素水平居中

代码示例：

<!doctype html>
<html lang="en">
<head>
  <title>Hello, world!</title>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <style>
    .main-div {
      min-height: 500px;
      border: 1px solid #ddd;
    }
  </style>
</head>
<body>
  <div class="main-div d-flex flex-column justify-content-end align-items-center">
    <!-- 底部居中的图片 -->
    <img src="your-image-path.jpg" alt="底部居中图片">
  </div>

  <!-- Optional JavaScript -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

这两种方法都能完美实现你要的图片底部居中效果，选哪个看你主div的现有布局就行~

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