图像定位正确，但类为.thumbnail的div定位在父锚的左侧。只需将mx-auto添加到此div中即可。

.thumbnail {
    cursor: pointer;
    height: 10em;
    width: 10em;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    box-sizing: content-box;
}

.thumbnail > img {
    max-height: 10em;
    max-width: 10em;
}

<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 justify-content-md-center">
  <div class="col col-md-4 d-flex justify-content-center text-center">
    <a href="/characters/pine">
      <div class="thumbnail align-text-bottom text-center mx-auto"><!-- added mx-auto to this -->
        <img class="center-block" src="https://media.gettyimages.com/id/157615990/photo/lasagna.jpg?s=612x612&w=gi&k=20&c=ue-VP7TbzbfT-KUHdhUz5T9CPBGteCiTESjiqA8CVHw=">
      </div>
      <div>Pineapple Lasagna Coleslaw</div>
    </a>
  </div>
</div>

这是因为缩略图宽度本身就是图像的确切宽度，因此它居中但没有您想要的宽度。将缩略图的宽度更改为100%，以便它继承其父级的宽度，图像将正确居中。

.thumbnail {
    cursor: pointer;
    height: 10em;
    width: 100%;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    box-sizing: content-box;
    outline: 1px solid red;
}


.thumbnail > img {
    max-height: 10em;
    max-width: 10em;
}

<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 justify-content-md-center">
  <div class="col col-md-4 d-flex justify-content-center text-center">
    <a href="/characters/pine">
      <div class="thumbnail align-text-bottom text-center">
        <img class="center-block" src="https://media.gettyimages.com/id/157615990/photo/lasagna.jpg?s=612x612&w=gi&k=20&c=ue-VP7TbzbfT-KUHdhUz5T9CPBGteCiTESjiqA8CVHw=">
      </div>
      <div>Pineapple Lasagna Coleslaw</div>
    </a>
  </div>
</div>