Can't center the image inside of a full-screen overlay modal

Question

I'm working on my first personal project with basic knowledge of HTML, CSS, and Vanilla Javascript and I'm trying to enlarge a picture on the page by placing it into a modal with the fullscreen overlay background.

I managed to get it bigger and back to the original size again at a click, but I can't get it centered within the modal. Sometimes it's touching top and bottom with a distorted height, other times both the image and the modal turn out to be too small, and sometimes it's in the left or any other corner of the screen.

I'd like it to be around 70% or 80% of the user screen and be centered both vertically and horizontally, including on the mobile.

The best I could manage is to get it to be the right size that doesn't get it distorted, but it sticks to the left upper corner on desktop and is a bit higher than the center on the mobile. The code is provided below.

HTML

<main role="main">    
    <h1 class="h1-mapas">MAPAS DE SUBTE</h1>
    <div class="main-div">
      <div id="img-div" class="img-div">
        <img id="mapa-img" class="mapa-img" src="/images/mapa-subte.jpg" alt="Mapa de subte con todas las líneas y paradas">
      </div>
    </div>
    <div id="theModal" class="modal">
      <img class="modal-img" id="modalImg">
    </div>
  </main>

CSS

.modal {
  display: none;
  position: absolute;
  z-index: 1;
  background-color: rgba(255,255,255,0.9);
  left: 0;
  top: 0;
  overflow: auto;
  width: 100%;
  height: 100%;
}

.modal-img {
  margin: 0 auto;
  width: 75%;
  animation-name: zoom;
  animation-duration: 0.6s;
}

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

JS

const modal = document.getElementById("theModal")
const img = document.getElementById("mapa-img")
const modalImage = document.getElementById("modalImg")

img.onclick = function() {
  modal.style.display = "block"
  modalImage.src = this.src
}

modal.onclick = function() {
  modal.style.display = "none"
}

I also tried adding and/or removing these in the.modal in CSS as well as changing the modal display to flex in JS and justifying the image centrally in CSS (it gets distorted by height then), but never managed to get it right.

top: 50%;
transform: translate(-50%, -50%);

width: 100%;
height: 100%;

Thanks a lot for your help, everyone!

Answer 1

I use display: grid for the modal and place-itmes: center as part of the CSS.

 const modal = document.getElementById("theModal") const img = document.getElementById("mapa-img") const modalImage = document.getElementById("modalImg") img.onclick = function() { modal.style.display = "grid" /* Changed */ modalImage.src = this.src } modal.onclick = function() { modal.style.display = "none" }

 #mapa-img { width: 25%; height: auto; }.modal { display: none; position: absolute; z-index: 1; background-color: rgba(255, 255, 255, 0.9); left: 0; top: 0; overflow: auto; width: 100%; height: 100%; place-items: center; /* Added */ }.modal-img { margin: 0 auto; width: 75%; animation-name: zoom; animation-duration: 0.6s; } @keyframes zoom { from { transform: scale(0.1) } to { transform: scale(1) } }

 <main role="main"> <h1 class="h1-mapas">MAPAS DE SUBTE</h1> <div class="main-div"> <div id="img-div" class="img-div"> <img id="mapa-img" class="mapa-img" src="https://picsum.photos/300/200" alt="Mapa de subte con todas las líneas y paradas"> </div> </div> <div id="theModal" class="modal"> <img class="modal-img" id="modalImg"> </div> </main>