JSFiddle - React, Tailwind, and code Playground

by NicosKaralis

HTML

<div class="block">
    <div class="centered">
        <div>Image</div>
        <span>Loading...</span>
    </div>
</div>

CSS

body,html{height:100%;}

.block {
    width:100%;
    height:100%;
    text-align: center;
    background: #c0c0c0;
}

.block:before {
    content:'';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em; /* Adjusts for spacing */
    
    /* For visualization 
      background: #808080; width: 5px;
    */
}
.centered {
    display: inline-block;
    vertical-align: middle;
    width: 300px;
    padding: 10px 15px;
    border: #a0a0a0 solid 1px;
    background: #f5f5f5;
}