/* 第一種方法：設定父容器的行高，子容器需要設定為行內塊 */
      .box1 {
        width: 200px;
        height: 200px;
        line-height: 200px;
        background: rgb(164, 214, 179);
      }
      .box1 span {
        display: inline-block;
        vertical-align: middle;
      }

      /* 第二種方法：flex佈局 */
      .box2 {
        width
 
: 200px;
        height: 200px;
        background: rgb(57, 175, 211);
        display: flex;
        align-items: center;
      }

      /* 第三種方法：table佈局 + vertical-align: middle; */
      .box3 {
        width: 200px;
        height: 200px;
        background-color: red;
        display: table;
      }
      .box3 span 
 
{
        display: table-cell;
        vertical-align: middle;
      }

    <!-- 方法一 -->
    <div class="box1">
      <span>
        遇上你是我今生最大的幸福，你可以不相信我說的話，但一定是真的。
      </span>
    </div>
    <!-- 方法二 -->
    <div class="box2">
      <span>
        遇上你是我今生最大的幸福，你可以不相信我說的話，但一定是真的。
      
 
</span>
    </div>
    <!-- 方法三 -->
    <div class="box3">
      <span>
        遇上你是我今生最大的幸福，你可以不相信我說的話，但一定是真的。
      </span>
    </div>

效果：