JSFiddle - React, Tailwind, and code Playground

HTML

<div class="textContainer">
    <p>This is one line</p>
</div>
<div class="textContainer">
    <p>This is one line</p>
    <p>This is still centred</p>
</div>
<div class="textContainer">
    <p>This is some text displaying on two lines</p>
</div>

CSS

div.textContainer {
    width: 10em;
    margin: 0 auto 1em auto;
    border: 1px solid #000;
    padding: 1em;
    text-align: center;
}

div.textContainer p {
    text-align: left;
    background-color: aqua;
    display: inline-block;
}