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

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

两条路，即 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; //