JSFiddle - React, Tailwind, and code Playground

by mrnobody

HTML

<div class="contain">
    <div class="centered">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum autem accusamus ab dolore officia consequatur rerum recusandae voluptates? Soluta ab eos ex consequuntur sed perferendis aliquam voluptas nulla vitae consectetur!</div>
</div>

CSS

html,body{
    height: 100%;
}
.contain{
    background-color: #d36;
    height: 100%;
    text-align: center;
    white-space: nowrap; /* Игнорируем перенос строк */
    overflow: hidden; /* Скрываем содержимое, которые выходит за контейнер, в нашем случае псевдоэлемент :after */
}
.contain:after{
    content: "";
    display: inline-block;
    vertical-align: middle;
    visibility: hidden;
    height: 100%;
    background-color: #369;
}
.centered{
    background-color: #9da;
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}