JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bluebox">
    <h2>Hi! I'm a text! Now, in this version, I'm fully centered!<h2>
</div>

CSS

.bluebox {
    width: 400px;
    background-color: blue;
    height: 150px;
    display: table-cell;
    vertical-align: middle;
}

.bluebox h2 {
    font-family: Arial;    
    font-size: 10pt;  
    text-align: center;
}