Bootstrap5布局问题：1199px以下按钮未居中反而左对齐

问题根源 #

你遇到的按钮左对齐问题和视差背景无关，核心是响应式列类的断点适配逻辑：
col-xl-4仅在屏幕宽度≥1200px时生效，当宽度<1200px时，这些列容器没有指定更小断点的列规则，会默认占据100%容器宽度。此时justify-content-center对全屏宽度的子元素无法起到居中作用，再加上按钮默认左对齐文本，就会出现视觉上的左对齐效果。

两种解决方法 #

方法1：让列宽度自适应按钮内容（保持横向排列+居中）

将col-xl-4替换为col-xl-4 col-auto，这样在<1200px时，列宽度会自动适配按钮内容，配合row的justify-content-center即可实现按钮居中：

<div class="row pb-4 d-flex justify-content-center">
  <div class="col-xl-4 col-auto">
      <p class="btn btn-warning btn-lg"><a href="resources-art-therapy-clinic.html" class="lit-link">Art Therapy<br>Clinical Literature<br>Source Material</a></p>
  </div>
  <div class="col-xl-4 col-auto">
       <p class="btn btn-warning btn-lg "><a href="#" class="lit-link">Resilience<br>Spiritual Development</a></p>
  </div>
  <div class="col-xl-4 col-auto">
        <p class="btn btn-warning btn-lg"><a href="resources-literature-integrative-medicine.html" class="lit-link">Integrative Medicine</a></p>
  </div>
</div>

方法2：让按钮在全屏列内居中（小屏幕堆叠+居中）

保持col-xl-4不变，给每个列容器添加text-center类，强制按钮在列内水平居中，即使小屏幕下列占满全屏，按钮也会居中显示：

<div class="row pb-4 d-flex justify-content-center">
  <div class="col-xl-4 text-center">
      <p class="btn btn-warning btn-lg"><a href="resources-art-therapy-clinic.html" class="lit-link">Art Therapy<br>Clinical Literature<br>Source Material</a></p>
  </div>
  <div class="col-xl-4 text-center">
       <p class="btn btn-warning btn-lg "><a href="#" class="lit-link">Resilience<br>Spiritual Development</a></p>
  </div>
  <div class="col-xl-4 text-center">
        <p class="btn btn-warning btn-lg"><a href="resources-literature-integrative-medicine.html" class="lit-link">Integrative Medicine</a></p>
  </div>
</div>

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