垂直居中

单纯的垂直居中，可以选择flex、absolute、

• flex

  <div class="wrap">
      <div class="" id="div4">
          hello
      </div>
  </div>

.wrap {
    border: 2px solid #2311ee;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#div4 {
    border: 2px solid #21e3f1;
    /*height: 40%;*/
}

• absolute

  <div class="wrap">
      <div class="" id="div4">
          hello
      </div>
  </div>
.wrap {
    border: 2px solid #2311ee;
    height: 200px;
    position: relative;
}
#div4 {
    border: 2px solid #21e3f1;
    height: 80px;
    position: absolute;
    top: 50%;
    margin-top: -40px;
}

margin-top 和 padding-top 都是以容器的宽度为参照的，不可想当然用百分比。

• 行内元素的垂直居中

lineheight='外层元素高度';
verticle-align: center;