JSFiddle - React, Tailwind, and code Playground

by Ilpo Oksanen

HTML

<div class="container"><div class="center-div">Lorem ipsum</div></div>
<div class="container"><div class="center-div">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>

<div class="container"><div class="center-div">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus venenatis laoreet tellus, sed auctor ex semper eget. Cras consequat aliquet tellus, ut maximus lorem. Etiam sit amet dignissim nibh. In tempor dolor eros, sed sollicitudin leo maximus at. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus sodales risus eu purus luctus, quis posuere ante sollicitudin. In vitae justo a turpis feugiat malesuada vitae quis eros. Phasellus feugiat malesuada tincidunt.</div></div>

CSS

.container{
    height:100px;
    line-height:100px;
    width:100px;
    box-shadow:0px 0px 0px 1px green;
}


.center-div {
    display:inline-block;
    vertical-align: middle;
    max-width: 100px;
    max-height: 100px;
    line-height:normal;
    overflow:hidden;
}