JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
    <div class="main-content">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/35/Information_icon.svg"/>
    <div class="text"><span class="inner-text">this is some text</span></div>
    </div>
</div>

CSS

html{
    height: 100%;
}
body{
    height: 100%;
}
.main{
    height: 100%;
    width: 100%;
    background: pink;
    display: table;
}

.main-content {
    display: table-cell;
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
}

img{
    width: 50px;
}

.text{
    display: block;
}