如何使用Bootstrap 5或CSS居中两列列表项？

核心思路 #

避免直接给列表或列容器加text-center（会破坏项目符号对齐），通过调整容器的flex布局实现整体居中，同时保留列表项的自然对齐。

实现方案1：自适应宽度的两列居中（推荐） #

让列宽度随内容自适应，整体在父容器中居中，同时保证列表项和按钮对齐：

<!-- 父容器：让列表组和按钮整体垂直排列+水平居中 -->
<div class="d-flex flex-column align-items-center">
  <!-- 列表行：两列水平居中分布 -->
  <div class="row justify-content-center">
    <div class="col-auto">
      <ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
      </ul>
    </div>
    <div class="col-auto">
      <ul>
        <li>列表项A</li>
        <li>列表项B</li>
        <li>列表项C</li>
      </ul>
    </div>
  </div>
  <!-- 下方按钮，和列表组对齐 -->
  <button class="btn btn-primary mt-3">确认按钮</button>
</div>

实现方案2：固定宽度的两列居中（保留col-6） #

如果必须使用col-6，可以通过限制父容器宽度+自动外边距实现整体居中：

<!-- 父容器：限制最大宽度，让整体居中 -->
<div class="d-flex flex-column align-items-center" style="max-width: 700px; margin: 0 auto;">
  <div class="row">
    <div class="col-6">
      <ul>
        <li>列表项1</li>
        <li>列表项2</li>
      </ul>
    </div>
    <div class="col-6">
      <ul>
        <li>列表项A</li>
        <li>列表项B</li>
      </ul>
    </div>
  </div>
  <button class="btn btn-primary mt-3">确认按钮</button>
</div>

关键细节说明 #

• d-flex flex-column align-items-center：让父容器内的所有元素（列表行、按钮）水平居中对齐
• row justify-content-center：让行内的两列在水平方向上居中分布，避免强制占满宽度导致的留白
• 不给<ul>或<li>加text-center：保留列表项默认的左对齐，保证项目符号和文本的自然排版

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