1.绝对定位

元素有高度情况下, top0/bottom0/margin: auto 0;

弊端:
  1> 必须使用定位(居中元素脱离标准流)父元素设置relatvie，relative不脱离标准流，所以居中元素只能是absolute或者fixed。
  2> 必须给子元素设置高度 不然就是占据父元素的全部高度

2.flex布局(直接使用flex)

align-items:center
弊端:
1> 当前flex局部中所有的元素都会被垂直居中
2> 相对来说, 兼容性差一点点(基本可以忽略)

3.top/translate(个人推荐, 不好理解)

先向下移动父亲盒子一般的高度，然后向上移动自己一般的高度。

image.png

两件事情:
1.让元素向下位移父元素的50%
2.让元素向上位移自身的50%

对子元素做相对定位，依然是在标准流里面的。

    .box3 {
      display: inline-block;
      height: 100px;
      background-color: #f00;
      position: relative;
      top: 50%;相对于父元素
      transform: translate(0, -50%);
}

Margin-top的百分比是相对于父元素的宽度。所以在这里不能使用margin-top，使用top。