如何实现Angular Material图标自身中心点在矩形容器内完全居中

问题根因 #

• 你当前给mat-icon手动添加了padding-top: 20%、padding-right: 30%的内边距，直接强制改变了图标的位置，是偏移的主要原因之一
• 仅用text-align: center只能实现水平居中，垂直方向靠<br>标签和padding控制，没有统一的垂直居中逻辑，适配性极差
• 字体类图标默认对齐文本基线，本身就会自带下沉的视觉偏移

解决方案 #

采用Flex布局实现容器内元素的水平+垂直居中，不需要硬编码位置，稳定性高。

1. 修改.rectangle的CSS：

.rectangle {
  width: 139px;
  height: 125px;
  border: 2px solid #bfc0c2;
  opacity: 1;
  background: #ffffff 0% 0% no-repeat padding-box;
  /* 新增flex布局配置 */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px; /* 自定义调整图标和文字的间距 */
}

2. 修改模板代码，删掉多余的内联样式和换行标签：

<div
    class="rectangle"
    (click)="clicked(item)"
    [style.backgroundColor]="item.color"
    *ngIf="item.itemType == allEnumTypes.ClickButton"
    title="{{ item.warning }}"
  >
    <mat-icon
      *ngIf="item.icon"
      fontIcon="{{ item.icon }}"
      [style.color]="item.iconColor"
      class="large-icon"
    ></mat-icon>
    <span class="select-button-text" [style.color]="item.fontColor">{{ item.display }}</span>
  </div>

3. 可选微调：如果调整后仍存在极细微的视觉偏移（部分Material图标本身的设计存在视觉权重偏差），可以给图标添加transform微调，不会影响整体布局稳定性：

.large-icon {
  /* 数值可根据实际偏移方向、大小自定义调整 */
  transform: translate(1px, -1px);
}

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