Image not staying centered when resizing screen-CodePudding

I have a card and I want to place an avatar in the middle of the card (photo 1), but when I make the screen smaller the avatar does not stay in the same position but it shifts to the right (photo 2). Can you help me?

photo 1 Card with avatar in the middle on normal size screen

photo 2 Image

Here is the code:

HTML

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

CSS

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

CodePudding user response：

remove the margin-left from .circulo it should be always in the center

CodePudding user response：

It's not staying centered because you gave .circulo a fixed margin-left value. Removing this margin should automatically center the image.

If that doesn't work you could use something like below:

.outerDiv {
    position: absolute;
}

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

Note: The .outerDiv class should be added to the div-element around the image.