如何使用Bootstrap实现div标签内图片的垂直居中对齐

需要基于Bootstrap实现div容器内的图片居中显示，尝试了多种实现方式、查阅多篇相关技术帖子后仍未达到预期效果。
当前使用的自定义CSS如下：

* {
    margin: 0;
    padding: 0;
}

.people-one {
    width: 100%;
    height: 100%;
}

body {
    background-color: #b2b2b2;
}

.paddimages {
    padding: 0;
}

当前页面结构代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="login.css">
    <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" href="bootstrap-icons.css">
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-4 position-relative">
                <div class="position-absolute top-50 start-50 translate-middle">
                    <img class="people-one" src="people-img.jpg" alt="人物图片">
                </div>
            </div>
            <div class="col-8">
                <p>Text</p>
            </div>
        </div>
    </div>
    <script src="bootstrap.bundle.min.js"></script>
</body>
</html>

现有代码用position-absolute类做居中，但作为定位参考父级的.col-4元素没有设置明确高度：绝对定位的元素会脱离标准文档流，无法撑开父容器高度，导致父容器实际渲染高度为0，居中定位的参考基准完全失效，图片自然无法按预期居中。同时给图片设置的width: 100%; height: 100%也存在问题，包裹图片的绝对定位容器本身没有设置明确宽高，图片尺寸渲染会出现异常。

任选以下一种方案即可实现居中效果：

• 方案1：保留现有绝对定位逻辑，补全父级高度，修正图片尺寸规则
  首先给作为定位父级的.col-4设置明确高度，比如占满整个视口高度可以加Bootstrap自带的vh-100类，同时修改图片的CSS规则，避免尺寸异常：

  <div class="col-4 position-relative vh-100">
      <div class="position-absolute top-50 start-50 translate-middle">
          <img class="people-one" src="people-img.jpg" alt="人物图片">
      </div>
  </div>
  

  对应CSS修改：

  .people-one {
      max-width: 100%;
      height: auto;
  }
  

• 方案2：改用Flex布局实现居中，代码更简洁，无高度塌陷问题
  不需要额外嵌套绝对定位的容器，直接给列容器加Bootstrap自带的Flex布局工具类即可，逻辑更稳定：

  <div class="col-4 d-flex align-items-center justify-content-center vh-100">
      <img class="people-one" src="people-img.jpg" alt="人物图片">
  </div>
  

如果不需要容器占满整个视口高度，可以把vh-100替换成你需要的自定义高度值，也可以给外层.row设置min-vh-100让整行占满视口高度，内部列会自动继承行高。

内容的提问来源于stack exchange，提问作者Emir Ünalan