JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <div class="outerContainer">
          <div class="innerContainer">
            <div class="element">
                <p>Some Text</p>
            </div>
          </div>
        </div>
    </li>
    <li>
        <div class="outerContainer">
          <div class="innerContainer">
            <div class="element">
                <p>A bit more text that goes on 2 lines</p>
            </div>
          </div>
        </div>
    </li>
    <li>
        <div class="outerContainer">
          <div class="innerContainer">
            <div class="element">
                <p>Even more text that demonstrates how lines can span multiple lines</p>
            </div>
          </div>
        </div>
    </li>
</ul>

CSS

.outerContainer {
    display: table;
    width: 100px; /* width of parent */
    height:100px; /* height of parent */
    overflow: hidden;
}
.outerContainer .innerContainer {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
li {
    background: #ddd;
    width: 100px;
    height: 100px;
    font-size: 0.8em;
    padding: 20px;
    margin-bottom: 10px;
    border:1px dashed #aaa;
}
ul {
    margin-left: 40px;
    margin-top: 30px;
}