• • 更新**：

我把你的代码编辑成静态的html来测试它。
我可以看到您的代码正在工作，但您可以尝试添加text-align: center;，以便使容器中的所有内容居中。
下面是完整的代码，您也可以在这里测试它：https://codesandbox.io/s/festive-hopper-73v528?file=/index.html
这是一个实时预览：https://73v528.csb.app/

<div
  class="container"
  style="margin-top: 50px; margin-bottom: 50px; text-align: center;"
>
  <div class="row">
    <div class="col-md-4">
      <h1>My Uploads</h1>
    </div>

    <div class="col-md-4">
      <a
        href="javascript:void(0);"
        class="btn btn-primary"
        onclick="selectFileForUpload();"
        >Upload</a
      >
    </div>
  </div>

  <div class="row">
    <div class="col-md-8" style="margin-top: 30px;">
      <div
        class="card"
        style="font-size: 100px; text-align: center; height: 100px;"
      >
        <div class="card-body"></div>

        <div class="card-footer">
          <div class="row">
            <div class="col-md-12">
              <p>chap5</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

您已在正文中应用了text-center属性，但根据屏幕截图，数据位于页脚

<div class="card" style="font-size: 100px; text-align: center; height: 100px;">
                 <div class="card-body">
                 </div>

                 <div class="card-footer">
                     <div class="row">
                         <div class="col-md-12">

改为在<div class="card">上应用样式检查上面的代码片段