How to center a text with an indeterminate number of characters and an indeterminate number of lines?

When writing pages in the past two days, I encountered a problem: how to make a paragraph of text with an indeterminate number of lines and characters in the center of the block

Below is my method, it might be a little cumbersome.

If there is a better way for the passing seniors, please point it out in the message. thank you very much.

*** Structure ***

  <div class="item">
        <div class="pic_wrapper">
            <img src="https://dummyimage.com/120.png/09f/fff" alt="作者的头像">
        </div>
        <div class="title_wrapper">
            <p class="title_inner">
                <span class="title_txt">
                    作者演讲内容的标题，这个标题可能很长，也可能很短。但是无论长度，最好都是让这个标题居中显示！
                </span>
            </p>
        </div>
    </div>

***Style***

.item{
    height: 200px;
    background: #f7f7f7;
    border: 1px solid #ccc;
    width: 120px;
        }
.pic_wrapper{
     width: 100%;
     height: 120px;
     overflow: hidden;
        }
img{
     width: 100%;
        }
.title_wrapper{
     height: 80px;
     display: table;
     font-size: 12px;
     padding: 5px;
     box-sizing: border-box;
        }
.title_inner{
      display: table-cell;
      vertical-align: middle;
        }
.title_txt{
       display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        }

The key points to achieve text centering are:

1. Outer container setting properties display:table
   2. Content container setting propertiesdisplay:tabel-cell;vertical-align:middle

that's it.

The general effect is as shown in the screenshot:

--- end---