如何在Bootstrap的container-fluid中居中嵌套的container容器？

我来帮你搞定这个居中问题！你遇到的核心问题是父容器没启用Flex布局，导致my-auto没法发挥垂直居中的作用，咱们一步步调整：

问题分析 #

你的.container-fluid（带setup-bg类）设置了固定高度550px，但默认是块级元素，my-auto只有在Flex容器里才能实现垂直方向的自动居中。而内部的.container在Bootstrap里本身就自带水平居中属性（左右margin:auto），所以咱们主要解决垂直居中的问题就行。

解决方案 #

修改你的CSS代码，给setup-bg类添加Flex布局相关属性：

/* Setup Buttons Specific Styling */
.setup-bg {
  background: url("https://image.ibb.co/geAGqy/setupbtns_bg.png");
  background-repeat: no-repeat;
  background-position: center;
  height: 550px;
  /* 添加以下Flex属性，实现容器内元素垂直+水平居中 */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中（可选，因为container本身已水平居中） */
}

添加后，内部的.container就会在.container-fluid里同时实现垂直和水平双居中了。

完整修改后的代码 #

CSS代码 #

/* Setup Buttons Specific Styling */
.setup-bg {
  background: url("https://image.ibb.co/geAGqy/setupbtns_bg.png");
  background-repeat: no-repeat;
  background-position: center;
  height: 550px;
  display: flex;
  align-items: center;
  justify-content: center;
}

HTML代码 #

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<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.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container-fluid setup-bg">
  <div class="container">
    <h3 class="h3 white my-5 text-center">
      A simple tool for you to create your own social share bar.
      <br> Click the social media icons to add them to your bar</h3>
    <div class="row button-row justify-content-center">
      <div class="col-xs-4 col-sm-3 col-md-1">
        <label class="image-checkbox">
          <a class="htmlShareBtns selectBox" id="html_fs_facebook-btn" width="150"></a>
          <input type="checkbox" name="facebook" value="facebook">
        </label>
      </div>
      <div class="col-xs-4 col-sm-3 col-md-1">
        <label class="image-checkbox">
          <a class="htmlShareBtns selectBox" id="html_fs_linkedin-btn" width="150"></a>
          <input type="checkbox" name="linkedin" value="linkedin">
        </label>
      </div>
      <div class="col-xs-4 col-sm-3 col-md-1">
        <label class="image-checkbox">
          <a class="htmlShareBtns selectBox" id="html_fs_twitter-btn" width="150"></a>
          <input type="checkbox" name="twitter" value="twitter">
        </label>
      </div>
      <div class="col-xs-4 col-sm-3 col-md-1">
        <label class="image-checkbox">
          <a class="htmlShareBtns selectBox" id="html_fs_pocket-btn" width="150"></a>
          <input type="checkbox" name="pocket" value="pocket">
        </label>
      </div>
      <div class="col-xs-4 col-sm-3 col-md-1">
        <label class="image-checkbox">
          <a class="htmlShareBtns selectBox" id="html_fs_copy-btn" width="150"></a>
          <input type="checkbox" name="copy" value="copy">
        </label>
      </div>
    </div>
    <div class="row text-center my-5">
      <div class="col-12">
        <button class="btn btn-primary fs_btn-primary" data-toggle="modal" data-target="#exampleModal" onclick="getShareButtonsCode()">Setup social share buttons</button>
      </div>
    </div>
  </div>
</div>

关键小知识点 #

• Bootstrap的my-auto类依赖父元素为Flex容器，才能实现垂直居中效果
• .container类默认自带水平居中属性，无需额外设置
• 给父容器添加display: flex; align-items: center是实现垂直居中的核心

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