/* 第一种方法：设置父容器的行高，子容器需要设置为行内块 */
      .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>

效果：

css多行文字垂直居中_编程