How to center an image vertically in modal?

Question

I have this modal that displays images. I want the image on mobile phone to be centered in the middle (vertically), without stretching it or anything, but can't achieve it.

Here is my modal (with JavaScript that displays this modal):

var modal = document.getElementById('imgmodal');
var img = document.getElementById('picture');
var modalImg = document.getElementById("img");
var download = document.getElementById('download-link');

img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  download.href = this.src;
}

var span = document.getElementById("close");
span.onclick = function() { 
  modal.style.display = "none";
}

/* exam_img */
#imgmodal {
  display: none; 
  position: fixed; 
  z-index: 1; 
  padding-top: 80px; 
  left: 0;
  top: 0;
  width: 100%;
  height: 100%; /* Full height */
  background-color: rgb(0,0,0); /* Fallback color */
  overflow: auto;
  background-color: rgb(0,0,0); /* Black w/ opacity */
  transition: 0.3s;
}

/* Modal Content (image) */
.content {
  margin: auto;
  display: block;
  height: 90%;
}

/* Add Animation */
.content, #caption {    
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 768px){
  .content { /* I want image to be vertically centered on smaller screens)*/
    width: 100%;
    max-height: 90%;
    height: auto;
  }
  #close {
    top: 2px;
    font-size: 40px;
  }
  #imgmodal {
    padding-top: 50px;
  }
  #caption {
    top: -1px;
  }
}

<li class="exam_li">
  <img id="picture" src="https://www.w3schools.com/css/img_fjords.jpg" alt="Slika Testa" width="60" height="60" class="img-resposive exam-img">
</li>

<div id="imgmodal">
  <div id="caption">
    <a id="download-link" download>
      <span class="glyphicon glyphicon-download"></span>
      <a id="download-link" download></a>
   </div>
  <span id="close">&times;</span>
  <img class="content" id="img">
</div>

Thank you in advance! "Working" code here: https://jsfiddle.net/dccLtfeh/

Answer 1

You need to add a css logic for the image to be vertically align on mobile device.

Postion with top and translate will do the logic. Postion:relative is used with top:50% which will make the image to move 50% from top and then transform: translateY(-50%);will move it 25% upper bringing it exactly center vertically.

@media only screen and (max-width: 768px) {
  .content {
    width: 100%;
    height: auto;
    position: relative;
    top: calc(50% - 25px);
    top: -moz-calc(50% - 25px);
    top: -webkit-calc(50% - 25px);
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
  }
}

Here is the working code comaptible with mobile device. Check this on mobile device.

var modal = document.getElementById('imgmodal');
var img = document.getElementById('picture');
var modalImg = document.getElementById("img");
var download = document.getElementById('download-link');
img.onclick = function() {
  modal.style.display = "block";
  modalImg.src = this.src;
  download.href = this.src;
}
var span = document.getElementById("close");
span.onclick = function() {
  modal.style.display = "none";
}

.exam-img:hover {
  cursor: pointer;
  transition: 0.2s;
  overflow: hidden;
}


/* exam_img */

#imgmodal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 80px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /* Full height */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  overflow: auto;
  background-color: rgb(0, 0, 0);
  /* Black w/ opacity */
  transition: 0.3s;
}


/* Modal Content (image) */

.content {
  margin: auto;
  display: block;
  height: 90%;
}


/* Caption of Modal Image */

#caption {
  text-align: center;
  color: #ccc;
  position: absolute;
  top: 15px;
  left: 35px;
  font-size: 40px;
  margin-top: 0;
}


/* Add Animation */

.content,
#caption {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(0)
  }
  to {
    -webkit-transform: scale(1)
  }
}

@keyframes zoom {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}


/* The Close Button */

#close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: 100;
  transition: 0.3s;
}

#close:hover,
#close:focus {
  color: #989898;
  text-decoration: none;
  cursor: pointer;
}

#download-link {
  font-size: 25px;
  color: #f1f1f1;
  font-weight: normal;
  text-decoration: none;
  transition: 0.2s;
  padding: 10px;
}

#download-link:hover {
  color: #989898;
}


/* 100% Image Width on Smaller Screens */

@media only screen and (max-width: 768px) {
  .content {
    width: 100%;
    height: auto;
    position: relative;
    top: calc(50% - 25px);
    top: -moz-calc(50% - 25px);
    top: -webkit-calc(50% - 25px);
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
  }
  #close {
    top: 2px;
    font-size: 40px;
  }
  #imgmodal {
    padding-top: 50px;
  }
  #caption {
    top: -1px;
  }
  
  @-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(0) translateY(-50%);
  }
  to {
    -webkit-transform: scale(1) translateY(-50%);
  }
}

@keyframes zoom {
  from {
    transform: scale(0) translateY(-50%); 
  }
  to {
    transform: scale(1) translateY(-50%);
  }
}
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="exam_li"><img id="picture" src="https://www.w3schools.com/css/img_fjords.jpg" alt="Slika Testa" width="60" height="60" class="img-resposive exam-img"></li>

<div id="imgmodal">
  <div id="caption"><a id="download-link" download><span class="glyphicon glyphicon-download"></span><a id="download-link" download></a></div>
  <span id="close">&times;</span>
  <img class="content" id="img">