How can I make my modal centered when adding a image to it?

Question

It seems overtime I add a image to my modal, it gets off centered from the user page.

When I say off centered, I mean the modal will be more down while leaving space on top.

I made a JS fiddle so you can see for yourself (resize your browser to 1230x650 if you can't see it) https://jsfiddle.net/2whfsnqe/

Image of the problem:

How can I make my modal center correctly when a image is added?

Js fiddle code:

<button onclick='noImage()'>
Open modal without image
</button>
<button onclick='withImage()'>
Open modal with image
</button>

<div id="myModal" class="modal">
   <div id='modal-content' class="modal-content">
     <div id='modal-header' class="modal-header">
        <span id='close' class="close">&times;</span>
       <h2 id='modal-title'><!--- modal-title to set data !---></h2>        
     </div>
     <div class="modal-body" id="modal-body"><!--- modal-body to set data !---></div>
     <div class="modal-footer" id="modal-footer"><!--- modal-footer to set data !---></div>
   </div>
 </div>
<script>
var modal = document.getElementById('myModal');
var span = document.getElementsByClassName("close")[0];
function noImage(){
  setModalTitle("HELLO!");
  setModalBody("<p>This modal has no image - and is centered fine.</p>");
  openModal();
}

function withImage(){
  setModalTitle("HELLO!");
  setModalBody("<p>This modal has a image, and isn't centered right :(</p><p>See how it goes off the page if you resize your browser to be smaller while leaving space on top?</p><img src='https://chart.googleapis.com/chart?chs=250x250&cht=qr&chl=3G58sN2JVX3tLBBDKfuUZ9q3fmG3nZ53iY '>");
  openModal();
}

function openModal(){
    span.onclick = function() {
        closeModal();
    }
    window.onclick = function(event) {
        if (event.target === modal) {
            closeModal();
        }
    }
    modal.style.display = "block";
}

function closeModal(){
    modal.style.display = "none";
    setModalBody("");
    setModalTitle("");
}

function setModalTitle(text){
    document.getElementById("modal-title").innerHTML = text;
}

function setModalBody(html){
    document.getElementById("modal-body").innerHTML = html;
}
</script>
/* modals */
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 10%;
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #FFFFFF;
    margin: auto;
    padding: 0;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
    text-align: center;
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close {
    color: #000;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    cursor: pointer;
    opacity: 0.7;
}

.modal-header {
    padding: 2px 16px;
    background-color: #FFFFFF;;
    color: black;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
    padding: 2px 16px;
    background-color: #FFFFFF;
    color: black;
}

Answer 1

The modal container has a padding-top value of 10%, and since padding percentages are based on the width of the container (see here ), it's expanding along with the width.

To fix it, you could either change the padding to an absolute value, or use flexbox to align it in the centre of the window.