JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wraptocenter">
    <span></span>
    <div class="child"> Hello I am child and ver and horz....</div>
</div>

CSS

.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: ...;
    height: ...;
}
.wraptocenter * {
    vertical-align: middle;
}

.wraptocenter {
    display: block;
    background:green;
    height:500px;
}
.wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
.child{
background:pink;
    min-height:100px;
    width:100px;
    display:inline-block;
    
}