JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bluebox"><h2>Hi i am a text, now I am only horizontal centered<h2></div>

CSS

.bluebox {
        width: 400px;
        background-color: blue;
        height: 200px;
        position: relative;
    }
    
    .bluebox h2 {
        font-family: Arial;    
        font-size: 10pt;  
        text-align: center;
        position: absolute;
        width: 100%;
        top: 50%;
        margin-top: -5pt /* half the height of your text size */
    }