How do I position the img element to a specific location?-CodePudding

I want to position the img element in the middle of the site. I already tried to postion it in css with the bottom tag to no avail

CSS:

img {
    border-radius: 50%;
    display: block;
    width: 128px;
    margin-left: auto;
    margin-right: auto;
}

HTML:

<html>
    <div >
    <img src="assets/img/logo-icon.png" alt="Avatar"></div>

CodePudding user response：

a simple option is to place an object in the center, you need to set its absolute position and the width of the parent block in % and then use left and right to center it

  .logo {
width: 10%;
height: 125px;
border-radius: 40%;
position: absolute;
left: 45%; 
right: 45%; 
top: 40%; }

.logo {
width: 10%;
height: 125px;
border-radius: 40%;
**position: absolute;**
left: 45%; 
right: 45%; 
top: 40%;

<html>
    <div >
    <img src="https://new-world-rpg.ru/wp-content/uploads/c/d/b/cdb30fb67d36f487047a812eef6c458d.jpeg" alt="Avatar">
    </div>