垂直居中：兩方向，四方法，條條大路通羅馬

垂直居中常見的四種方法總結

兩條路，即 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;
 }