how to fix model popup on center of the page - html

Question

i am using model popup on the page. i have table with 200 rows on the page. and when i click each row model popup open. but when i scroll down on the table and click on row. model popup open upside on the page. i want it to open always on the center of the page even i scroll down on the table.
my css is
.modal {
position: absolute;
top: 30px;
right: 100px;
bottom: 0;
left: 0;
z-index: 10040;
overflow: auto;
overflow-y: auto;
}

Answer 1

Here is an example (Live: http://ud.ht/gLlF):
<div class="modal" role="dialog" style="display: block;">
<div class="modal-parent">
<div class="modal-container">
<div class="modal-contnet">
<span class="modal-text" role="dialog-message">This is text</span>
</div>
</div>
</div>
</div>
Here is the css:
.modal {
z-index: 10000;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,.7);
font-family: Tahoma;
overflow: auto;
overflow-y: scroll;
overflow-x: auto;
display: none;
}
.modal-parent {
display: table;
height: 100%;
table-layout: fixed;
width: 100%;
}
.modal-container {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 100%;
}
.modal-contnet {
width: 450px;
display: inline-block;
position: relative;
text-align: right;
background-color: #eee;
margin: 20px 0;
}
.modal-text {
padding: 20px 25px;
font-family: Tahoma;
font-size: 12px;
display: block;
direction: rtl;
text-align: center;
line-height: 20px;
}

Answer 2

.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
z-index: 999;
}
.modal-body {
margin-top: 30px;
margin-left: auto;
margin-right: auto;
width: 600px;
min-height: 20px;
}
<div class="modal">
<div class="modal-body">
<p>Your content here</p>
</div>
</div
try this, hopes this helps you