Haga clic aquí para ver el screensot de mi Modal

mi Modal se pega en la parte inferior, sin embargo, lo quiero en el centro de la página... el siguiente código mi Modal se pega en la parte inferior, sin embargo, lo quiero en el centro de la página... el siguiente código, mi Modal es adhiérase al fondo, sin embargo lo quiero en el centro de la página... el siguiente código my Modal está adherido al final, sin embargo lo quiero en el centro de la página... el siguiente código my Modal está adherido al final , sin embargo, lo quiero en el centro de la página... el siguiente código, mi Modal se pega en la parte inferior, sin embargo, lo quiero en el centro de la página... el siguiente código, mi Modal se pega en la parte inferior, como quiera en el centro de la página... el siguiente código my Modal se pega en la parte inferior, sin embargo lo quiero en el centro de la página... el siguiente código

Este es mi JS para el modal.

 const modalLinkElements = document.querySelectorAll('.info-modal'); let infoModal; function toggleBackdrop() { backdropElement.classList.toggle('visible'); } function presentInfoModal(event) { const bookId = parseInt(event.target.dataset.text); toggleBackdrop(); infoModal = document.createElement('div'); infoModal.classList.add('modal'); allArtAndDesignBooks.forEach((product) => { if (product.id===bookId) { infoModal.innerHTML = ` <h2>${product.name}</h2> <div class="container-fluid"> <div class=""row"> <div class="col-sm-4"> <img src="${product.imgSrc}" /> </div> <div class="col-sm-8"> <p>${product.description}</p> </div> </div> </div> `; } }) const closeButton = document.createElement('button'); closeButton.addEventListener('click', hideInfoModal); closeButton.textContent = 'Okay'; infoModal.appendChild(closeButton); document.body.appendChild(infoModal); } function hideInfoModal() { toggleBackdrop(); document.body.removeChild(infoModal); } backdropElement.addEventListener('click', hideInfoModal); for (const linkElement of modalLinkElements) { linkElement.addEventListener('click', presentInfoModal); }

** y este es mi css para modal**

 .modal { position: fixed; top: 20vh; bottom: 10vh; left: 5%; width: 90%; z-index: 100; background: white; border-radius: 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26); animation: float-in 0.3s ease-out forwards; display: flex; flex-direction: column; overflow:hidden; overflow-y:scroll; vertical-align:middle; }

** no tengo mucho que escribir detalles para esta publicación **