Bootstrap 5 图片水平居中失效，如何解决？

问题 #

尝试为父div添加justify-content-center和text-center类实现图片水平居中，文本能正常居中，但图片仍靠左显示，如何修复？

原代码示例 #

CSS #

.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;
}

HTML #

<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>

修复方案 #

方案1：给图片添加Bootstrap内置类 #

给<img>标签添加d-block mx-auto类，利用mx-auto实现左右外边距自动（需配合块级元素），让图片在.thumbnail容器内居中：

<img class="d-block mx-auto" src="https://media.gettyimages.com/id/157615990/photo/lasagna.jpg?s=612x612&w=gi&k=20&c=ue-VP7TbzbfT-KUHdhUz5T9CPBGteCiTESjiqA8CVHw=">

方案2：给.thumbnail容器启用Flex布局 #

修改.thumbnail的类，添加d-flex justify-content-center align-items-center，通过Flex布局直接让图片在容器内水平垂直居中：

<div class="thumbnail align-text-bottom d-flex justify-content-center align-items-center">
  <img src="https://media.gettyimages.com/id/157615990/photo/lasagna.jpg?s=612x612&w=gi&k=20&c=ue-VP7TbzbfT-KUHdhUz5T9CPBGteCiTESjiqA8CVHw=">
</div>

原因说明 #

原方案中，text-center仅对行内/行内块元素生效，但.thumbnail是固定宽高的块级容器，图片默认左对齐；外层的justify-content-center仅作用于.col的子元素（即<a>标签），让整个链接块在列内居中，但无法影响.thumbnail内部的图片对齐。上述两种方案分别通过调整图片的外边距或容器的布局方式，直接解决图片在父容器内的居中问题。

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