JSFiddle - React, Tailwind, and code Playground

by DJS Baker

HTML

<div class="wrapper">
    <div class="centered">
    
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,    
        
    </div>
</div>

CSS

.wrapper {
    display: table;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    height: 100%;
    bottom: -50%;
    background: green;
    padding: 0 20%;
}
.centered {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    margin: 0 50%;
}