Bootstrap布局margin-left不生效，如何实现区块居中？

我有一个区块无法居中，尝试设置margin-left属性但未生效，请问有什么解决办法？

显示效果：区块未居中，自定义margin-left样式未生效

相关代码 #

CSS 代码 #

.margins {
  margin-left: 100px;
}

HTML 代码 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="row margins">

  <div class="col-6 col-md-4 col-lg-3 col-xl-2 my-3">
    <a href="/AnonymousCode/anonymouscode.html"><img class="img-fluid" src="https://www.spike-chunsoft.com/wp-content/uploads/AC_324x400-1.jpg"></a>
    <div class="card-body">
      <h4 class="card-title text-center">ANONYMOUS; CODE</h4>
      <p class="card-text"> </p>
    </div>
  </div>

  <div class="col-6 col-md-4 col-lg-3 col-xl-2 my-3">
    <a href="/CHAOS;HEAD NOAH/CHAOS;HEAD NOAH.html"><img class="img-fluid" src="https://www.spike-chunsoft.com/wp-content/uploads/CHN_324x400.png"></a>
    <div class="card-body">
      <h4 class="card-title text-center">CHAOS;HEAD NOAH</h4>
      <p class="card-text"> </p>
    </div>
  </div>

  <div class="col-6 col-md-4 col-lg-3 col-xl-2 my-3">
    <a href="/CHAOS DOUBLE PACK/CHAOSDOUBLEPACK.html"><img class="img-fluid" src="https://www.spike-chunsoft.com/wp-content/uploads/CHC_324x400.jpg"></a>
    <div class="card-body">
      <h4 class="card-title text-center">CHAOS;HEAD NOAH / DOUBLE PACK</h4>
      <p class="card-text"> </p>
    </div>
  </div>

  <div class="col-6 col-md-4 col-lg-3 col-xl-2 my-3">
    <a href="/AI-nirvana/ai_nirvana.html"><img class="img-fluid" src="https://www.spike-chunsoft.com/wp-content/uploads/AI2_324x400_r2.jpg"></a>
    <div class="card-body">
      <h4 class="card-title text-center">AI: THE SOMNIUM FILES</h4>
      <p class="card-text"> </p>
    </div>
  </div>

</div>

解决办法 #

原因分析 #

Bootstrap的.row类默认自带负边距（margin-left: -12px、margin-right: -12px），且默认宽度为100%，直接设置margin-left会被默认样式覆盖，同时因为宽度占满父容器，无法体现居中效果。

方案1：使用Bootstrap内置类（推荐） #

利用Bootstrap的flex布局工具类，无需自定义CSS：

1. 给.row的父容器添加container或container-fluid，规范Bootstrap布局结构
2. 给.row添加justify-content-center类，让内部列元素水平居中

修改后的HTML示例：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="container">
  <div class="row justify-content-center">
    <!-- 原有列内容保持不变 -->
  </div>
</div>

方案2：自定义CSS覆盖样式 #

如果需要手动控制边距，可通过以下CSS实现居中：

.margins {
  /* 覆盖Bootstrap默认负边距 */
  margin-left: auto !important;
  margin-right: auto !important;
  /* 可选：设置最大宽度，避免内容过宽 */
  max-width: 1200px;
}

或者移除row类的默认负边距后设置居中：

.margins {
  margin-left: 0;
  margin-right: 0;
  margin: 0 auto;
  max-width: 1200px;
}

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