垂直居中

1. flex 布局

2. 绝对定位 position

div {
  display: absolute;
  height: 100px;
  top: 0;
  bottom: 0;
  margin: auto 0;
}

1. 利用 transform 的 translate 位移

思路和图片做背景图居中是一样的，只不过换成了垂直方向。先向下移动父元素高度的一半，然后再向上移动自身高度的一半。

向下移动父元素高度的一半很容易想到 margin-top：50%。但是这是错误的，凡是百分比，都要想想这个百分比相对的是谁。margin-top 的百分比相对的是父元素的宽度，对，看起来很离谱，但事实就是这样。
所以不能用 margin-top 来移动。

正确的方法：
将元素进行相对定位，相对定位不脱标，又可以通过方位控制位置。然后通过 top：50% 来移动。top 的百分比相对的就是包含块，也就是父元素。
最后通过 transform 的 translate(0, -50%) 来实现 y 轴向上位移。translate 的百分比相对的就是自己。

div {
  display: relative;
  top: 50%;
  transform: translate(0, -50%);
}