嘿，我来帮你搞定这个文本垂直居中的问题！看你的代码用了Bootstrap的栅格系统，那咱们分**CSS（优先推荐，样式逻辑交给CSS更符合前端最佳实践）**和JS两种方式来适配你的场景：

一、CSS方案（最推荐） #

1. 直接用Bootstrap原生类（最快） #

Bootstrap的.row默认是flex布局容器，你只需要给外层的.row加上align-items-center类，就能让所有子列（.col-md-*）里的内容自动垂直居中了，完全不用额外写CSS：

<div class="row margin-0 align-items-center"> <!-- 新增align-items-center类 -->
  <div class="col-md-12">
    <div class="col-md-6">
      <label class="header-invite-list-labels">Invite description</label>
    </div>
    <div class="col-md-2">
      <label class="header-invite-list-labels">Start Date</label>
    </div>
    <div class="col-md-2">
      <label class="header-invite-list-labels">End Date</label>
    </div>
    <div class="col-md-2">
      <label class="header-invite-list-labels">Invite Status</label>
    </div>
  </div>
</div>

2. 自定义CSS适配（灵活度更高） #

如果你的布局有特殊需求，不想修改row的类，可以给包含label的列或者label本身加样式：

• 针对多行/不确定高度的文本：用flex布局让父容器垂直对齐

/* 给所有包含label的col设置flex垂直居中 */
.col-md-6, .col-md-2 {
  display: flex;
  align-items: center;
  /* 若父容器有固定高度，可补充height: xxxpx; 无固定高度时min-height也能生效 */
}

• 针对单行文本：用line-height（适合父容器高度固定的情况）

.header-invite-list-labels {
  line-height: 40px; /* 数值与父容器高度保持一致即可 */
}

二、JS方案（仅特殊场景使用） #

一般不推荐用JS处理样式，但如果你的内容是动态生成且CSS无法满足需求的话，可以用JS计算垂直居中的位置：

// 获取所有需要居中的label元素
const centerLabels = document.querySelectorAll('.header-invite-list-labels');

centerLabels.forEach(label => {
  const parentEl = label.parentElement;
  // 计算父容器与label的高度差
  const heightGap = parentEl.offsetHeight - label.offsetHeight;
  // 设置margin-top实现垂直居中
  label.style.marginTop = `${heightGap / 2}px`;
});

⚠️ 注意：如果窗口大小变化或者内容动态更新，需要重新执行这段代码，否则居中效果会失效。

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