Please click here to see the screensot of my Modal

my Modal is stick to the bottom, however I want it in the center of the page... the following code my Modal is stick to the bottom, however I want it in the center of the page... the following codemy Modal is stick to the bottom, however I want it in the center of the page... the following codemy Modal is stick to the bottom, however I want it in the center of the page... the following codemy Modal is stick to the bottom, however I want it in the center of the page... the following codemy Modal is stick to the bottom, however I want it in the center of the page... the following codemy Modal is stick to the bottom, however I want it in the center of the page... the following codemy Modal is stick to the bottom, however I want it in the center of the page... the following code

This is my JS for the 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);
}

** and this is my css for 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;
}

** i dont have much to write detail for this post **