JSFiddle - React, Tailwind, and code Playground

HTML

<div id=e1 class=hcenter-child>
    <span id=e2>inline child</span>
    <div id=e3 class="hcenter">block child</div>
</div>

CSS

#e1
{
    width:200px;
    height:200px;
    background-color:#888;
}

#e2, #e3
{
    background-color:#bbb;
}

/* use for inline children */
.hcenter-child
{
    text-align:center;
}
.hcenter-child *
{
    text-align:left; /*reset the text align as it inherits*/
}

/* use for block elements */
.hcenter
{
    width:96%; /*needs any width other than auto*/
    margin-left:auto;
    margin-right:auto;
}