title: my Modal is stick to the bottom, however I want it in the center of the page
body: <p><a href="https://i.stack.imgur.com/pBiEJ.png" rel="nofollow noreferrer">Please click here to see the screensot of my Modal</a></p>
  <p><strong>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</strong></p>
  <p>This is my JS for the modal</p>
  <pre><code>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) =&gt; {
        if (product.id===bookId)
        {
            infoModal.innerHTML = `
  
            &lt;h2&gt;${product.name}&lt;/h2&gt;
            &lt;div class=&quot;container-fluid&quot;&gt;
                &lt;div class=&quot;&quot;row&quot;&gt;
                    &lt;div class=&quot;col-sm-4&quot;&gt;
                         
                                 &lt;img src=&quot;${product.imgSrc}&quot; /&gt;
                            
                        &lt;/div&gt;
                    &lt;div class=&quot;col-sm-8&quot;&gt;
  
                         &lt;p&gt;${product.description}&lt;/p&gt;   
                    &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  
            
  `;
        }
     
    })
    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);
  }
  
  </code></pre>
  <p>** and this is my css for modal**</p>
  <pre><code>.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;
  }
  
  </code></pre>
  <p>** i dont have much to write detail for this post **</p>