Provides a link to JSFiddle with vertically centered modal

vertically-centered-modal

// Can be found at https://jsfiddle.net/jkem8nsz/49/

// HTML
<a href="#" id="text">
  click to show modal<br >
</a>

<div id="modal" class="modal-outer">
  <div class="modal-middle">
    <div class="modal-inner">
      <h1>The Content</h1>
      <p>Once upon a midnight dreary...</p>
    </div>
  </div>
</div>

// JS
document.getElementById("text").addEventListener("click", function() {
	var modal = document.getElementById("modal");
  modal.style.display = "table";
});

// CSS
.modal-outer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  
  /* dim outside of modal */
  background-color: rgba(0,0,0,0.8);
  
  /* initially hide*/
  display: none;
}

.modal-middle {
  display: table-cell;
  vertical-align: middle;
}

.modal-inner {
  margin-left: auto;
  margin-right: auto;
  
  /* set width based on what you'd like */
  width: 400px;
  
  /* customizations */
  border: 1px solid black;
  padding: 1rem;
  background-color: white;
}