CSS - center popup div in the middle even when page is scrolling

Question

I am trying to center a popup div in the middle of the screen, it does not work for all scenarios.

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.

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...

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) ?

this is the Div css :

#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



<div id="TableWrapper" >
    <div id="DescriptionDiv">
        <span id="DescClose"><i class="fa fa-times"></i></span>
        <h6 id="DesTitle"></h6>
        <span id="Time"></span>
        <div id="Desc"></div>
    </div>
</div>

Thanks

Answer 1

Change

position: absolute;

To

position: fixed;

Fixed positioning will keep it from scrolling with the rest of the content. [MDN]