Having trouble with HTML and CSS. I have a div containing 2 images - one for background and the other for an avatar image that I can't seem to center. I've tried using margin:0 auto; and display:block; but it's not working.
Current HTML page: https://i.sstatic.net/vzi9s.jpg
Desired appearance: https://i.sstatic.net/WgX6C.jpg
.avatar {
width: 15%;
position:absolute;
}
.img-home {
width: 100%;
height: 100vh;
}
.content {
float:right;
width:75%;
height: 100rem;
}
HTML:
<div class="content">
<img src="images/avatar.png" class="avatar">
<img src="images/bg.jpeg" class="img-home">
</div>