如何调整Angular 17 Material选择框高度并保持内容居中？

针对你使用的带outline样式的Mat Select，以下是两种可靠的实现思路：

1. 优先使用官方内置密度配置（推荐） #

Angular Material提供了**密度（Density）**系统，通过属性即可直接调整组件整体尺寸，无需手动修改CSS，还能保证内部元素自动对齐：

在mat-form-field上添加density属性，数值越小，组件越紧凑：

<mat-form-field appearance="outline" density="-2">
  <!-- 原有内容不变 -->
</mat-form-field>

• 可选密度值：-3（最紧凑）、-2、-1、0（默认）、1、2、3（最宽松）
• 这种方式会自动调整输入框高度、内边距、箭头位置和标签偏移，完全不会出现错位问题。

2. 自定义CSS实现更精细的控制 #

如果内置密度无法满足需求，需要手动调整高度，必须同时修改多个关联元素的样式，避免箭头偏移：

步骤1：给mat-form-field添加自定义类 #

<mat-form-field appearance="outline" class="custom-small-select">
  <!-- 原有内容不变 -->
</mat-form-field>

步骤2：添加全局CSS样式（推荐放在styles.scss中） #

.custom-small-select {
  /* 定义表单域整体高度变量 */
  --mdc-form-field-container-height: 36px;

  .mat-mdc-form-field-infix {
    min-height: 32px; /* 自定义输入框核心区域高度 */
    padding: 6px 0; /* 上下内边距，配合高度调整 */
    display: flex;
    align-items: center; /* 确保触发内容垂直居中 */
  }

  /* 调整下拉箭头容器，保证箭头垂直居中 */
  .mat-mdc-select-arrow-wrapper {
    height: 100%;
    display: flex;
    align-items: center;
  }

  /* 调整浮动标签的位置，避免错位 */
  .mat-mdc-floating-label {
    top: calc(var(--mdc-form-field-container-height) / 2 + 4px);
    transform-origin: left top;
  }

  /* 聚焦时的标签位置调整 */
  &.mat-mdc-form-field-focused .mat-mdc-floating-label {
    top: 8px;
    transform: scale(0.75);
  }
}

注意事项 #

• 不要直接修改.mat-mdc-form-field-infix的height，改用min-height保证内容溢出时的兼容性
• 必须同步调整箭头容器和标签的样式，否则会出现元素错位
• 避免在组件内使用::ng-deep（已废弃），优先使用全局样式或CSS变量

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