垂直居中：两方向，四方法，条条大路通罗马

垂直居中常见的四种方法总结

两条路，即 flex box 或者 绝对定位。

四种方法，分别如下：

方向一： flex box

#container{
  display: flex;
  justify-content: center;
  align-items: center;
}

方向二：绝对定位

2.1 先把顶点移动到中心，再挪回自身长宽的一半（transform-translate）

 #container{
  ...
  position:relative;
 }
 #center{
  ...
  position:absolute;
  top:50%;
  left:50%; // 这三行，使得小方块的顶点（左上）相对于大方块的顶点居中了。

  transform: translate(-50%,-50%); // transform 的 translate 属性是相对于自身的， 顶点已经居中了，再相对自身往回移动一般，就把中心移到原来顶点所处的中心了。这样整个图形就居中了。
 }

2.2 先把顶点移动到中心，再挪回自身长宽的一版（直接用计算宽度并用负 margin）

 #container{
  ...
  position: relative;
 }
 #center{
  position: absolute;
  top: 50%;
  left: 50%; // 同上
   
  margin: -50px; // 与上面同理。只不过是用 -margin 往回找，这个数字分别是一半的高度 和 一半的宽度; 需要知道自身宽度
 }

2.3 横竖两个两边都是 margin 为 0 的居中

 #container{
  ...
  position: relative;
 }
 #center{
   position: absolute;

   margin:auto; // 相当于两个两边都是 0 的 margin 居中
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
 }