title: CSS - center popup div in the middle even when page is scrolling
body: <p>I am trying to center a popup div in the middle of the screen, it does not work for all scenarios.<p> I have a listing table, where columns represent daily hours and rows radio channels, so let's assume that on the current viewport only 10 radio channels can be fit and whenever a user clicks on a channel, the popup shows up with some information.<p> Until now everything is fine, the popup is centered as I want, but If I scroll down for example to channel (row) 20-30 ect.. and click, the popup wont appear in the center of the screen but right above where it first did...</p>
  
  <p>I think it is annoying to always scroll all the way up to see the information, is there a way to fix this div to always show in the middle of the screen regardless of the scrolling(row position) ?</p>
  
  <p>this is the Div css :</p>
  
  <pre><code>#DescriptionDiv{
      display: none;
      position: absolute;
      top: 25%;
      left: 25%;
      width: 50%;
      padding: 16px;
      border: 3px solid orange;
      background-color: white;
      z-index:1002;
      overflow: auto;
  }
  
  
  #TableWrapper{
       width : 900px;
       height: 600px;
  } // the Parent Div of the listing
  
  
  
  &lt;div id="TableWrapper" &gt;
      &lt;div id="DescriptionDiv"&gt;
          &lt;span id="DescClose"&gt;&lt;i class="fa fa-times"&gt;&lt;/i&gt;&lt;/span&gt;
          &lt;h6 id="DesTitle"&gt;&lt;/h6&gt;
          &lt;span id="Time"&gt;&lt;/span&gt;
          &lt;div id="Desc"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks</p>