JSFiddle - React, Tailwind, and code Playground

HTML

<table class="outer">
    <tr>
        <td>
            <table class="inner">
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>4</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

CSS

body {
    margin: 0;
}

html, body, table.outer, tr, td {
    height: 100%;
}

table.outer {
    width: 100%;
    border-collapse: collapse;
}

table.inner {
    margin: auto;
}

table.inner td {
    background:red;
    width:200px;
    height:150px;
    vertical-align: middle;
    text-align: center;
}