JSFiddle - React, Tailwind, and code Playground

HTML

<div class="oneLineCentered">
    <p>I'm one line centered vertically and horizontally.</p>
</div>

<div class="displayTable">
    <p>I'm displayed as a table cell.</p>
</div>

CSS

.oneLineCentered{
     background-color:blue;
     color:white;
     height:40px;   
     line-height:40px;
     text-align:center;
}
.displayTable{
     display:table;   
     height:500px; 
     width:100px;
     padding:50px; 
     background-color:red;
     color:white;
}

.displayTable p{
     display:table-cell;   
     text-align:center;
     vertical-align:middle;
     height:40px;
}