Centralizar div na tela com rolagem vertical

Centralizar div na tela com rolagem vertical

HTML

<div class="header">
</div>
<div class="box-center">
    <table class="list">
        <th>Nome</th>
        <th>Id</th>
        <tr>
            <td>Lorem</td>
            <td>Lorem</td>
        </tr>
        <tr>
            <td>Lorem</td>
            <td>Lorem</td>
        </tr>
        <tr>
            <td>Lorem</td>
            <td>Lorem</td>
        </tr>
        <tr>
            <td>Lorem</td>
            <td>Lorem</td>
        </tr>
        <tr>
            <td>Lorem</td>
            <td>Lorem</td>
        </tr>
        <tr>
            <td>Lorem</td>
            <td>Lorem</td>
        </tr>
        <tr>
            <td>Lorem</td>
            <td>Lorem</td>
        </tr>
        <tr>
            <td>Lorem</td>
            <td>Lorem</td>
        </tr>
    </table>
</div>
<div class="footer">
</div>

CSS

body {
    margin:0;
    padding:0;
}
.header
{
    width: 100%;
    height: 50px;
    background-color:gray;
    position:absolute;
    z-index: 1
}
.footer
{
    width: 100%;
    height: 50px;
    background-color:gray;
    bottom:0;
    position:absolute;
    z-index: 1
}
.box-center 
{
    position:absolute;
	left:50%;
	top:50%;
	margin-left:-150px;
	margin-top:-100px;
    width: 300px;
    height: 200px;
    overflow-y:scroll;
    border: 1px solid #CCC;
    padding: 3px;
}

.list, th, tr, td
{
    border: 1px solid #CCC;
    border-collapse:collapse;
    padding: 5px;
    margin: 5px;
}