它们不会居中，因为.text-center不会像影响文本那样影响列。您需要使用.justify-content-center。它们之间没有任何间距，因为您将自己的自定义CSS应用于.col-*属性，添加边框和填充。
您还将.container应用于.row，而.row在任何版本的Bootstrap中都无效。通过更正CSS声明，并将每列的内容 Package 在一个元素中，以容纳您想要的填充/背景样式，您可以实现您的目标。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">

<section class="container">
  <div class="row text-center mb-5">
    <div class="col">
      Letters
    </div>
  </div>

  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3 justify-content-center text-center">
    <div class="col">
      <div class="bg-light border p-3">
        <h2>A</h2>
        <p>B</p>
        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
     </div>
    </div>

    <div class="col">
      <div class="bg-light border p-3">
        <h2>C</h2>
        <p>D</p>
        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
     </div>
    </div>

    <div class="col">
      <div class="bg-light border p-3">
        <h2>E</h2>
        <p>F</p>
        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
     </div>
    </div>

    <div class="col">
      <div class="bg-light border p-3">
        <h2>G</h2>
        <p>H</p>
        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
     </div>
    </div>
  </div>
</section>