How do I keep my image fixed in the center?

Question

I'm having a problem with an image I am trying to get smaller when I scroll down. Until now I got this, it works perfectly except for the fact that when I scroll down the image gets smaller to the upper left corner of the picture, instead of the middle. This way the image doesn't stay in the centre. Is there any way for me to keep the image in the middle or somehow change the anchor point to the centre?

// When the user scrolls down 50px from the top of the document, resize the header's font size
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("logohome").style.height = "15%";
    document.getElementById("logohome").style.width = "15%";
  } else {
    document.getElementById("logohome").style.height = "40%";
    document.getElementById("logohome").style.width = "40%";
  }
}

#logohome{
    position: fixed;
    top: 0;
    left: 43%;
    width: 35%;
    transform: translate(0%, 0%);
    transition: 0.2s;
    
}

<div id="logohome">
  <img src="img/logosmallbrown.png" width="50%" height="50%">
</div>

Answer 1

I made two decisions for you. The first is with position: fixed, and the second solution is with position: sticky. In the second solution, your picture will always be strictly centered on the scores margin-left: auto and margin-right: auto.

Was it necessary?

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
      document.getElementById("logohome").style.width = "15%";
      document.getElementById("logohome").style.left = "42%";
  } else {
      document.getElementById("logohome").style.width = "35%";
      document.getElementById("logohome").style.left = "32%";
  }

}

body {
    height: 3000px;
}

#logohome{
    position: fixed;
    top: 0;
    left: 32%;
    width: 35%;
    transform: translate(0%, 0%);
    transition: 0.2s;
    text-align: center;
}

<div id="logohome">
       <img src="https://static3.depositphotos.com/1000992/133/i/450/depositphotos_1337508-stock-photo-a-free-flying-white-dove.jpg" width="50%" height="50%">
</div>

This is the solution with position: sticky:

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
      document.getElementById("logohome").style.width = "15%";
  } else {
      document.getElementById("logohome").style.width = "35%";
  }

}

body {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    height: 3000px;
}

#logohome{
    position: sticky;
    top: 0;
    width: 35%;
    transition: 0.2s;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

<div id="logohome">
       <img src="https://static3.depositphotos.com/1000992/133/i/450/depositphotos_1337508-stock-photo-a-free-flying-white-dove.jpg" width="50%" height="50%">
</div>

Answer 2

This is very easy with css

#logohome {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
```

Also I feel you can get rid of `width="50%" height="50%"` from the `img` tag.

1. `position: fixed` - Keeps your image fixed on the page
2. `top: 50%` - Places the image at 50% distance from the top of the window
3. `left: 50%` - Places the image at 50% distance from the left edge of the window

You should first try doing this much so you see how you image placement is.

Next add:
4. `transform: translate(-50%, -50%)` This will move your image "upwards" by 50% of its height and "leftwards" by 50% of its width and thus place it exactly in the center. 


Here is the working code snippet:




// When the user scrolls down 50px from the top of the document, resize the header's font size
window.onscroll = function() {
  scrollFunction()
};

function scrollFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("logohome").style.height = "15%";
    document.getElementById("logohome").style.width = "15%";
  } else {
    document.getElementById("logohome").style.height = "40%";
    document.getElementById("logohome").style.width = "40%";
  }
}
#logohome {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div id="logohome">
  <img src="https://static1.squarespace.com/static/575a6067b654f9b902f452f4/59e64b57cf81e064f900819a/5c8c127beb393116ec4e1c52/1552683697079/300Logo.png?format=1500w">
</div>

Answer 3

Wrap the tag first with a tag, then let the tag inherit the centralized attribute from the tag. Here's the code of the HTML, modify it.

<div>
Sample Text
<span style="text-align: center;"><img src="file_path_here"></span>
<!--Now you can put stuff here-->
</div>

Answer 4

you can do this by this code:

img{
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}