Angular Material中mat-form-field内容垂直居中问题求助

需要调整的核心CSS类及修改方案 #

直接针对Angular Material的内置类做样式覆盖即可，具体如下：

// 若在组件内样式文件中使用，需要加::ng-deep穿透样式隔离；全局样式文件中可省略
::ng-deep .mat-form-field {
  height: 40px;

  // 移除默认上下内边距（这是内容偏移的核心原因）
  .mat-form-field-wrapper {
    padding: 0 !important;
  }

  // 让内部flex容器垂直居中
  .mat-form-field-flex {
    height: 100%;
    align-items: center;
  }

  // 输入框元素调整内边距和行高
  .mat-input-element {
    padding-top: 0;
    padding-bottom: 0;
    line-height: normal;
  }

  // 下拉选择器触发器调整布局
  .mat-select-trigger {
    height: 100%;
    display: flex;
    align-items: center;
  }
}

关键说明 #

• mat-form-field-wrapper默认带有上下内边距，会挤占40px高度内的空间，必须移除
• mat-form-field-flex作为内部布局容器，设置height:100%和align-items:center才能让子元素垂直居中
• 针对输入框、下拉选择器的内部元素，需调整内边距和布局方式，避免额外高度占用导致偏移

内容的提问来源于stack exchange，提问作者Federico Andres Ratcliffe