多行文字垂直居中的方法

方法一：父元素使用display:table和子元素使用display:table-cell属性来模拟表格，子元素设置vertical-align:middle和text-align:center即可垂直居中。

.div1{
    height:300px;
    width: 300px;
    background-color: cadetblue;
    display: table;
}
.span1{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
<div class="div1">
    <span class="span1">
        方法一：父元素使用display:table和子元素使用display:table-cell属性来模拟表格，子元素设置vertical-align:middle即可垂直居中
    </span>
</div>

方法二：对子元素设置display:inline-block属性，使其转化成行内块元素，模拟成单行文本。父元素设置对应的height和line-height。对子元素设置vertical-align:middle属性，使其基线对齐。添加line-height属性，覆盖继承自父元素的行高。缺点：文本的高度不能超过外部盒子的高度。

.div1{
    height:300px;
    width: 300px;
    background-color: cadetblue;
    line-height: 300px;
}
.span1{
    display: inline-block;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
}
<div class="div1">
    <span class="span1">
    方法二：对子元素设置display:inline-block属性，使其转化成行内块元素，模拟成单行文本。父元素设置对应的height和line-height。对子元素设置vertical-align:middle属性，使其基线对齐。添加line-height属性，覆盖继承自父元素的行高。缺点：文本的高度不能超过外部盒子的高度。
    </span>
</div>

方法三：脱离文档流的居中方式，使用定位，为父盒子设置宽高，使用相对定位，子盒子使用绝对定位，先向右向下偏移50%，再通过transform偏移自身宽度和长度的一半达到居中

          .div1{
              height:300px;
              width: 300px;
              background-color: cadetblue;
              position: relative;
          }
          .div2
          {
              width: 240px;
              position: absolute;
              top:50%;
              left:50%;
              transform: translate(-50%,-50%);
          }
<div class="div1">
    <div class="div2">
        方法三：脱离文档流的居中方式，使用定位，为父盒子设置宽高，使用相对定位，子盒子使用绝对定位，先向右向下偏移50%，再通过transform偏移自身宽度和长度的一半达到居中
    </div>
</div>