Angular：mat-select在mat-table行单元格内无法垂直居中问题求助

你的问题核心是单元格本身未设置垂直对齐，加上mat-form-field默认带上下外边距，导致align-items: center没有在单元格高度范围内生效。可以通过以下几步修复：

1. 给mat-cell设置垂直对齐 #

直接给表格单元格添加垂直居中样式，确保单元格内容整体垂直居中：

td[mat-cell] {
  vertical-align: middle;
}

2. 移除mat-form-field的默认外边距 #

mat-form-field默认带有上下外边距，会撑开容器高度，导致视觉上没有居中，需要清除：

.actions-column mat-form-field {
  margin: 0;
}

3. 确保容器占满单元格高度 #

让actions-column容器高度铺满整个单元格，这样align-items: center才能正确作用：

.actions-column {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%; /* 新增这行 */
}

修改后的完整代码示例 #

<td mat-cell *matCellDef="let element">
  <div class="actions-column">
    <mat-form-field appearance="fill">
      <mat-select>...</mat-select>
    </mat-form-field>
    <mat-form-field appearance="fill">
      <mat-select>...</mat-select>
    </mat-form-field>
    <mat-form-field appearance="fill">
      <mat-select>...</mat-select>
    </mat-form-field>
  </div>
</td>

td[mat-cell] {
  vertical-align: middle;
}

.actions-column {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.actions-column mat-form-field {
  margin: 0;
}

这样就能让三个mat-select在单元格内垂直居中，不再紧贴顶部。

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