如何在Angular Material中让按钮与matInput垂直居中对齐？

核心问题根源 #

mat-form-field内部的mat-form-field-wrapper默认带有底部边距，这会让输入框的整体高度大于普通按钮，导致默认布局下按钮位置偏低，视觉不协调。

无魔法数字的适配解决方案 #

以下方法均能自动适配输入框或按钮高度变化，无需硬写固定像素值：

1. 原生Flex布局（推荐）

将输入框和按钮放在同一个Flex容器中，利用Flex的对齐属性实现垂直居中，这是最健壮的方案：

HTML结构：

<div class="form-action-row">
  <mat-form-field appearance="fill">
    <mat-label>First Name</mat-label>
    <input matInput placeholder="Enter your name">
  </mat-form-field>
  <button mat-raised-button color="primary">Submit</button>
</div>

CSS样式（组件内或全局）：

.form-action-row {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  gap: 16px; /* 输入框与按钮的间距 */
}

.form-action-row mat-form-field {
  flex: 1; /* 让输入框占据剩余空间，可选 */
}

这种方式会自动跟随输入框（比如有错误提示、浮动标签变化）或按钮的高度调整，始终保持居中。

2. 移除mat-form-field的底部边距（配合基线对齐）

如果需要保持输入框和按钮的基线对齐，可以去掉mat-form-field-wrapper的默认底部边距，同时确保按钮和输入框的基线对齐：

CSS样式（组件内使用::ng-deep限定范围）：

:host ::ng-deep .mat-form-field-wrapper {
  margin-bottom: 0; /* 移除默认底部边距 */
}

.form-action-row {
  display: inline-flex;
  align-items: baseline; /* 基线对齐，视觉上更统一 */
  gap: 16px;
}

注意：此方法需确保输入框不会显示错误提示或帮助文本，否则这些元素会溢出容器；如果需要保留这些状态，建议优先使用Flex居中方案。

关于Material未提供默认对齐方式的原因 #

Angular Material的mat-form-field设计初衷是支持完整的表单字段状态：包括浮动标签、错误提示、帮助文本、字符计数等，这些元素都会动态改变输入框的高度。如果默认设置与按钮对齐，会破坏表单字段在复杂场景下的布局一致性，因此将对齐逻辑交给开发者根据具体布局场景自定义。

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