After alignment of the table overflow isn’t working? couldn’t figure out why?

this is my css there are other elements also which are not related I think
and i am using the below css to align the table to the center of the screen its fine untill the table has 12 or 13 rows after that it exceeds the screen i want it to scroll after it exceed the limit of the screen
before that it keeps expanding from the center
css

.toAlignTable {
background-color: white;
border-radius: 10px;
padding: 40px 30px 30px 30px;
position: absloute;
top: 48%;
left: 50%;
width: 750px;
height: auto;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: -webkit-transform 300ms, box-shadow 300ms;
-moz-transition: -moz-transform 300ms, box-shadow 300ms;
transition: transform 300ms, box-shadow 300ms;
box-shadow: 5px 10px 10px rgba(2, 128, 144, 0.2);
}

html table

<table class=”highlight centered responsive-table toaligntable” >
<thead>
<tr>
<th style=”border-top-left-radius: 10px;”>S.No.</th>
<th>Account name</th>
<th style=”border-top-right-radius: 10px;”>Login</th>
</tr>
</thead>
<tbody id=”searchResultsBody” style=”font-size: 120%;”>

</tbody>
</table>

<template id=”populateTemplate”>
<tr style=”font-weight: 180;height:auto;”>
<td style=”background-color: #c5cbce;” class=”s_num” scope=”row”></td>
<td style=”background-color: #dddddd;” class=”collection_acc” scope=”row”></td>
<td><button class=”waves-effect waves-light roundeed blue-grey btn access_btn”>access</button></td>
</tr>
</template>

javaScript

var resultsArray = [
[
1,
“FIRST ACCOUNT”,
“PRIMARY”
],
[
2,
“SECOND ACCOUNT”,
“PRIMARY”
],
[
3,
“THIRD ACCOUNT”,
“SECONDARY”
],
.
.
.
[
15,
“fifteen ACCOUNT”,
“SECONDARY”
]
]

var searchResultsBox= document.getElementById(“searchResultsBody”);
var templateBox= document.getElementById(“populateTemplate”);
var template = templateBox.content;

searchResultsBox.innerHTML = “”;

resultsArray.forEach(function(r){

var row = template.cloneNode(true);

row.querySelector(“.s_num”).textContent = r[0];
row.querySelector(“.collection_acc”).textContent = r[1];
row.querySelector(“.access_btn”).dataset.clientID = r[0];

searchResultsBox.appendChild(row);

});

when there are only a few rows it keeps expanding but then

after having more than 15 rows it exceeds the screen

I want the table to have scroll when the table exceeds the limit in y-axix