屏幕缩放时Mat Card内Avatar无法居中问题求助

架构老林

2026-8-4

问题

我使用Angular Material的Mat Card，希望将Avatar固定在卡片中央，正常屏幕尺寸下显示正常，但缩小屏幕时Avatar会向右偏移，无法保持居中位置。

HTML代码

<div mat-card-avatar fxLayoutAlign="center">
    <img mat-card-image src="{{current.avatar}}" class="circulo">
</div>

CSS代码

.circulo{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    position: relative;
    top: -35px;
}

解决方案

问题出在mat-card-avatar的默认样式与fxLayoutAlign在响应式场景下的冲突，同时相对定位的设置没有配合全局居中的容器。可以通过以下两种方式解决：

方式一：自定义容器替代默认`mat-card-avatar`

修改HTML代码，用自定义容器包裹Avatar：

<div class="avatar-container">
    <img mat-card-image src="{{current.avatar}}" class="circulo">
</div>

对应的CSS代码：

.avatar-container {
    display: flex;
    justify-content: center;
    width: 100%;
    position: relative;
    top: -35px;
}

.circulo{
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

方式二：覆盖`mat-card-avatar`的默认样式

如果要保留mat-card-avatar标签，直接修改其样式：

<div mat-card-avatar>
    <img mat-card-image src="{{current.avatar}}" class="circulo">
</div>

对应的CSS代码：

mat-card-avatar {
    display: flex;
    justify-content: center;
    width: 100% !important;
    position: relative;
    top: -35px;
}

.circulo{
    width: 80px;
    height: 80px;
    border-radius: 50%;
}