使用 Flex 将垫子图标放在 div 的中心？

Question

尝试将 Angular 放在mat-icon包含的中心div：

<div style="background-color: yellow;
            display: flex; 
            flex-direction: column;
            width: 100px;
            height: 120px; 
            align-items:center; 
            justify-content: center; ">
    <mat-icon style="font-size: 60px;">
    account_circle
    </mat-icon>
</div>

它没有居中。 这是 stackblitz 演示。

我注意到，当使用开发人员工具显示轮廓时mat-icon，它显示元素的实际尺寸位于中间，但该元素的内容溢出了其边界，因此图标出现偏离中心。

想知道如何解决这个问题吗？

Answer 1

将高度和宽度属性设置为 mat-icon。它将起作用

   <mat-icon style="font-size: 60px;height:60px;width:60px;">
    account_circle
    </mat-icon>

默认情况下，mat-icon 的高度和宽度为 24px；

试试这个代码：

<div style="background-color:yellow;
            display: flex; 
            width: 100px;
            height: 120px; 
            align-items:center; 
            justify-content: center; ">
    <mat-icon style="font-size: 60px;height:60px;width:60px;">
    account_circle
    </mat-icon>
</div>