JSFiddle - React, Tailwind, and code Playground

HTML

I am not being centered
<div class="block" style="height: 100px;">
    <div class="centered">
         <table style="width:100%;border: 1px solid black;">
        <tr>
            <td>testing</td>
            <td>testing</td>
        </tr>
    </table>
    </div>
</div>

CSS

.block {
    text-align: center;
    background: #c0c0c0;
    border: #a0a0a0 solid 1px;
    margin: 20px;
}
.block:before {
    content:'';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
    /* Adjusts for spacing */
}
.centered {
    display: inline-block;
    vertical-align: middle;
    width: 300px;
    padding: 10px 15px;
    border: #a0a0a0 solid 1px;
    background: #f5f5f5; 
}