Image to move to center of window on window resize with jquery

Question

so I've been playing with this for about an hour and having be searching through stackoverflow. I am just trying to get this image that I have set to center of the screen to stay in the center based on window resizing. I have found something that kind of does this except for the fact that it may lose track of center of the screen after awhile and get off center. Below is the code I am using.

HTML

<img data-target="#csgo1"  class="csgo img" align="middle" src="https://upload.wikimedia.org/wikipedia/en/6/6f/Smiley_Face.png"
<center><img data-target="#csgo1" style="display:none;" id="csgo1" class="csgo1 img" align="middle" src="pictures/csgo.png"></center>

CSS

.img
{
cursor:pointer;
}
.csgo1
{
opacity:.35;
-webkit-filter: brightness(70%);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
margin:0 auto;
border-left: 75px;
border-right: 75px;
border-top:10px;
border-bottom:10px;
border-color:#0a1b0a;
border-style:solid;
left:40%;
top:100px;
position:fixed;
z-index:100;
transition: 1s ease;
}
.csgo1:hover
{
opacity:1;
-webkit-filter: brightness(100%);
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
transition: 1s ease;
}

JQuery

//function to set image in center of screen
$(document).ready(function(){
$('.img').on('click', function(){
var target = $($(this).data('target'));
if(target.css('display') == "none"){ 
    target.attr('src',$(this).attr('src'));
    $(".content").animate({opacity: .1});
    $(".footer").animate({opacity: .1});
    target.attr('style', 'height:' + this.height*2 + 'px;');
    target.attr('style', 'width:' + this.width*2 + 'px;');
target.css("top", Math.max(0, (($(window).height() - target.outerHeight()) / 2)) + "px");
target.css("left", Math.max(0, (($(window).width() - target.outerWidth()) / 2)) + "px");
test = true;
    target.fadeIn();
}else{
    target.hide();
    test = false
    $(".content").animate({opacity: 1}, 10);
    $(".footer").animate({opacity: 1}, 10);
 }
});
});


//function to resize image on window resize
$(window).resize(function() {
var curWidth = $(window).width(); //store the window's current width
var curHeight = $(window).height(); 
var delta = (curWidth- origWidth);
var charlie = (curHeight- origHeight);
$(".csgo1").offset({left:($(".csgo1").offset().left + delta)});
$(".csgo1").offset({top:($(".csgo1").offset().top + charlie)});
origWidth = curWidth;
origHeight = curHeight;
});

https://jsfiddle.net/nathanahartmann/dqjua4dk/

Any help on how to get a more centered picture while it not losing track of center of the window would be greatly appreciated!!

Here is my actual site I am working on to fix this. nathanahartmann.com

Using text-align:center; and top:calc(50%); left:calc(50%); as listed below has not correctly centered all of my images. Any help with this would be appreciated.

Answer 1

Sorry I know this does not answer your question, but just to share a way I'd do it:

var $lb = $("<div/>", {
    id: "lightbox",
    appendTo: "body",
    click :function() {
      $(this).removeClass("show");
    }
  });

$("[data-full]").click(function(){
  $lb.css({backgroundImage:"url('"+$(this).data("full")+"')"}).addClass("show");
});

html, body{height:100%;margin:0;}

#lightbox{
  box-shadow: 0 0 0 400px rgba(0,0,0,0.7);
  background: rgba(0,0,0,0.7) none 50% no-repeat;
  background-size: contain;
  -webkit-transition: 0.7s;
          transition: 0.7s;
  position: fixed;
  top: 0; left: 0;
  z-index: 1000;
  width: 90%; height: 90%;
  margin: 5%;
  opacity: 0;
  visibility: hidden;
}#lightbox.show{
  opacity: 1;
  visibility: visible;
}#lightbox:after{
  content:"×";
  color:#fff;
  position:absolute;
  right: 10px; top: 10px;
  font-size: 30px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img src="//placehold.it/120x120/4af/fff/&text=Click+me"
     data-full="//placehold.it/800x800/4af/fff/&text=Click+me">

<img src="//placehold.it/120x60/a4f/&text=Click+me"
     data-full="//placehold.it/800x400/a4f/&text=Click+me">

Answer 2

hi please find below codepen. but understand that this code will only work if your image height and width is fix.

you don't need that much javascript for that, instead use CSS.

HTML part,

<div class="containerDiv">
  <img src="https://upload.wikimedia.org/wikipedia/en/6/6f/Smiley_Face.png" />
</div>

CSS part,

.containerDiv
{
  width:100%;
  position:relative;
  height:100vh;
}
.containerDiv img
{
  position:absolute;
  top:calc(50% - 90px);
  left:calc(50% - 90px);
}

See the Demo