多行文字垂直居中

老生长谈的问题了。由于学习了一下table 布局。简单总结一下

    <div class="container1">
       <div>table-cell: hello, I am your long lost penpal</div>
    </div> 

    <div class="container2">
      <div>inline-block: You are my sunshine, you are my rain</div>
    </div>

    <div class="container3">
      <div>absolute: You are my sunshine, you are my rain</div>
    </div>

    <div class="container4">
      <div>flex: You are my sunshine, you are my rain</div>
    </div>

.container1{
  display: table;
  width: 100%;
  height: 100px;
  background-color: #FF5722;
  text-align: center;
  margin-bottom: 10px;
  div {
    display: table-cell;
    vertical-align: middle;
    box-sizing: border-box;
    padding: 0 25%;
    text-align: left;
    color: white;
  }
}

.container2{
  width: 100%;
  height: 100px;
  background-color: #8bc34a;
  text-align: center;
  margin-bottom: 10px;
  div {
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
    width: 50%;
    text-align: left;
    color: white;
  }

  &::before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
}

.container3{
  position: relative;
  width: 100%;
  height: 100px;
  background-color: #E91E63;
  text-align: center;
  margin-bottom: 10px;
  div {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    width: 50%;
    text-align: left;
    color: white;
  }
}

.container4{
  position: relative;
  width: 100%;
  height: 100px;
  background-color: #3F51B5;
  text-align: center;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  div {
    box-sizing: border-box;
    width: 50%;
    text-align: left;
    color: white;
  }
}