头像有反应的卡片

Question

我有一张卡片，我必须将头像放在卡片的中央，但在卡片的中间（照片 1），但是当我将屏幕变小时，这个头像不会停留在相同的位置（照片 2），你能帮忙吗我

照片 1 enter image description here

照片 2 enter image description here

这是代码：

我把它放在垫卡里的 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;
    margin-left: 320px;
}

Answer 1

从 .circulo 中删除 margin-left 它应该总是在中心

Answer 2

它没有保持居中，因为你给了.circulo一个固定的margin-left值。删除此边距应自动居中图像。

---

如果这不起作用，您可以使用以下内容：

.center {
    position: absolute;
}

.circulo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}