JSFiddle - React, Tailwind, and code Playground

HTML

Only using margins
<div style="height: 100px; border: 1px solid black">
<div class="verticalAlign">
    OMG
</div>
</div>
<br />
using a table
<table>
             <tr>
                  <td>
                       <div style="border: 1px solid blue" id="verticallyCenteredContent">
                          OMG it's vertically aligned
                       </div>
                 </td>
    </tr>
</table>
<br />
using line-height on fixed height container
<div id="fixedHeightLineHeight">
    <div>
        Omg it's vertically aligned using line height and fixed container height properties
    </div>
</div>

CSS

.verticalAlign {
    margin: auto;
    width: 50px;
    height: 50px;
    border: 1px solid red;
    
}

table {
    width: 100%; 
    height: 100px; 
    border: 1px solid black; 
    margin-top: 10px;
    vertical-align: middle;
}


#verticallyCenteredContent {
    height: 50px;
    width: 100px;
    margin: auto;
    display: block;     
}

#fixedHeightLineHeight {
    height: 100px;
    border: 1px solid black;
}

#fixedHeightLineHeight div {
    line-height: 100px;
    border: 1px solid green;
}