Fix Image Position

I have limited knowledge around this, hence why I am probably struggling.

I am trying to add an image that will link to a twitter account within a bio using the following code:

<a href="https://twitter.com/UserName" target="_blank">
<img style="position:absolute;left:33.75%;bottom:-71.5%; width:65px; height:65px;" 
src="https://i.imgur.com/AAA111.jpg" target="_blank"></a>

This works perfectly fine but only if Chrome on my monitor is maximised. If I go on a different computer or make the window smaller etc the image does not stay in a fixed position and instead will move to a random spot on the page.

How can I fix this?

Thanks in advance

Solution

With the code snippet below, the image will be centered horizontally and vertically on the screen regardless of the screen size. You can just the positioning of the image with the CSS below. With this setup, no matter where you position the image, it should stay mostly in that position regardless of the screen size.

You can test my code by running the snippet, making it full screen and playing with the screen size. The image will always stay in the center. Again you can adjust the values to adjust the position to how you need it. Hope this helps!

.wrapper {
  min-height: 100vh;
  width: 100%;
  position: relative;
}

.wrapper img {
  width: 65px;
  height: auto; /* Or 65px, whatever you need it to be. */
  position: absolute;
  
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* This will place it in the middle */
}

<div class='wrapper'>
  <a href="https://twitter.com/UserName" target="_blank">
  <img src="https://i.imgur.com/AAA111.jpg" target="_blank"></a>
</div>