JSFiddle - React, Tailwind, and code Playground

by jiawen ge

HTML

<div class="block">
    
    <div class="centered">
        &nbsp;center&nbsp;center&nbsp;center&nbsp;center<br>
        &nbsp;center&nbsp;center&nbsp;center&nbsp;center<br>
        &nbsp;center&nbsp;center&nbsp;center&nbsp;center<br>
        &nbsp;center&nbsp;center&nbsp;center&nbsp;center<br>
    </div>
    
</div>

CSS

.block {
    text-align: center;
    background: #c0c0c0;
    height: 300px;
}
 
.block:before {
    content: '';
    display: inline-block;
    height: 100%; 
    vertical-align: middle;
    margin-right: -0.25em; /* Adjusts for spacing */
 }
 
.centered {
    display: inline-block;
    vertical-align: middle;
    background: #f5f5f5;
 }