Bootstrap5卡片内Row元素垂直居中异常，如何实现垂直居中？

问题描述 #

容器内的元素靠近底部而非顶部，与预期不符。为何元素不会自动靠上？是否存在额外内边距？
我尝试为卡片添加align-content: center;样式，但不清楚其作用，且该样式及justify-content: center;均无效。
为col-3添加margin: 0;后解决了居中问题，但我不明白其中原因。

代码示例 #

<!DOCTYPE html>
<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<!-- just a spacer -->
  <div class="m-2"></div>
  <div class="container card">
    <div class="row g-1 m-1">
      <div class="col-6" style="align-content:center;">
        Task goes here
      </div>
      <div class="col-3">
        <button class="btn btn-danger w-100">Delete</button>
      </div>
      <div class="col-3">
        <button class="btn btn-success w-100">Complete</button>
      </div>
    <!-- end row -->
    </div>
  <!-- end container (end single task) -->
  </div>
</body>
</html>

原因分析 #

• Bootstrap的btn类默认自带margin-top: 0.25rem（对应框架内的mt-1间距级别），这个顶部外边距会让按钮所在的col-3容器整体向下偏移，导致和左侧文本区域出现垂直对齐偏差。
• 你给col-6设置的align-content:center无效，因为该属性仅作用于多行分布的弹性容器，而单个col内是单行内容，完全触发不了这个样式的效果。justify-content:center是控制元素的水平对齐方向，和垂直方向的顶部对齐需求无关。

解决方法 #

方法1：移除按钮默认顶部外边距 #

给按钮添加Bootstrap内置的mt-0类，精准清除顶部外边距，既符合框架规范，又不会影响按钮的其他方向间距：

<div class="col-3">
  <button class="btn btn-danger w-100 mt-0">Delete</button>
</div>
<div class="col-3">
  <button class="btn btn-success w-100 mt-0">Complete</button>
</div>

方法2：强制列内元素顶部对齐 #

给所有col添加align-self-start类，强制让列内元素贴紧行的顶部，即使按钮有默认外边距，整体视觉上也能保持对齐：

<div class="col-6 align-self-start">
  Task goes here
</div>
<div class="col-3 align-self-start">
  <button class="btn btn-danger w-100">Delete</button>
</div>
<div class="col-3 align-self-start">
  <button class="btn btn-success w-100">Complete</button>
</div>

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