problem with finding the middle of position absolute image-CodePudding

I am trying to make the middle button to be always in the middle of image, regardless of size of image ( which will changes ) and resizing the window and device type . At the moment if you make the window smaller it is not in the middle any more . Take a look at this jsfiddle example :

http://jsfiddle.net/vivaldi30/0thdob5m/1/

#full_image {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

#full_image img {     
    max-width: 100%;
}

#full_image .middle-key{
    background-color:yellow;
    top: 50%;     
    cursor: pointer;
    
     height: 29px;
    opacity: 1;
    position: absolute;    
    width: 59px;
    z-index: 999;
    right: 10px;
    color: #222;
    text-decoration: none;
    text-align: center;
    line-height: 28px;
}

<div id="full_image">
    
    <img src="http://cdn.funkyspacemonkey.com/wp-content/uploads/2013/06/steve-wozniak-white-iphone-4.jpg"/>
    
    <a href="#" >middle</a>
    
</div>

CodePudding user response：

When wanting to position an absolute item in the middle, you can use:

#full_image .middle-key {
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}