JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <thead>
        <tr>
            <th>Left</th>
            <th>Center</th>
            <th>Right</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td>
                <span class="toCenter">SomeVeryBigTextThatDoesNotFit</span>
            </td>
            <td></td>
        </tr>
    </tbody>
</table>

CSS

table, td {
    border:1px solid black;
}
table {
    width:500px;
    border-collapse: collapse;
    table-layout:fixed;
}
td {
    text-align:center;
    color:red;
}
.toCenter {
    display: inline-block;
    position: relative;
    margin-left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}