JSFiddle - React, Tailwind, and code Playground

HTML

This text is short length, it is shown in the middle
<div class="container">
<span class="text">Lorem ipsum dolor sit amet</span>

</div>and when the text length is long, I want everything to be displayed in the middle

<div class="container">
      <div class="_text">Lorem ipsum dolor sit amet, ipsum loroes eheu</div>
</div>

CSS

.text {
    left:25px;
    top:13px;
    width:120px;
    font-size:11px;
    color:#fff;
}
._text {
    font-size:11px;
    color:#fff;
    margin: 0px auto;
    text-align: center;
    vertical-align: middle;
    line-height: 150px;
}
.container {
    background:#010101;
    width:450px;
    height:150px;
}