JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wraptocenter">
    <span></span>
    <div>
        <table width="100%">
            <tr>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>
</div>

CSS

.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width:155px;
    height: 160px;
    background-color:#999;
    display: block;
    font-size:0;
}
.wraptocenter>div{
    display:inline-block;
    width:70%;
    font-size:16px;
}
.wraptocenter tr, .wraptocenter td{
    height:10px;
}
.wraptocenter * {
    vertical-align: middle;
}

.wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
.wraptocenter td{
    border:1px solid black;
}
</style>
<!--[if lt IE 8]><style>
.wraptocenter span {
    display: inline-block;
    height: 100%;
}
.wraptocenter>div{
    display:inline;
}
</style><![endif]-->
<style>