JSFiddle - React, Tailwind, and code Playground

HTML

<div id="#headingcontainer">
<div class="leftimg">Left</div>
<div class="rightimg">Right</div>
<div class="heading">
    <div class="centerdiv">Content to be centered horizontally and vertically</div></div>
</div>

CSS

#headingcontainer
{
border: none;
border-bottom: 2px solid #8c8cd4;
width: 100%;
height: 100px;
text-align: center;
background-color: #000;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
    display:inline-block;
}

div.heading
{

vertical-align: middle;
height: 100px;
text-align: center;
width: auto;
    margin:0 auto;
    
}


div.leftimg
{
width: 150px;
float: left;
}

div.rightimg
{
width: 150px;
float: right;
}

.centerdiv
{
    display: table;
    margin:0 auto;
    text-align:center;
    
}